移动端开发遇到的问题以及解决方案以及开发经验（多半是样式造成的兼容性问题在Android和ios表现出入）

开心绿茶 發表於 2020-11-9 22:39:00

移动端开发遇到的问题以及解决方案以及开发经验（多半是样式造成的兼容性问题在Android和ios表现出入）

首先先谈下基本的样式存在的问题影响
1、上下拉动滚动条时卡顿、慢（Android3+和iOSi5+支持CSS3的新属性为overflow-scrolling）
<div class="cnblogs_code">
<pre>body{
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
}</pre>
</div>
2、长时间按住页面出现闪退
<div class="cnblogs_code">
<pre>element{
-webkit-touch-callout:none;
}</pre>
</div>
3、iphone及ipad下输入框默认内阴影
<div class="cnblogs_code">
<pre>element{
-webkit-appearance:none;
}</pre>
</div>
4、ios和android下触摸元素时出现半透明灰色遮罩
<div class="cnblogs_code">
<pre>element {
-webkit-tap-highlight-color:rgba(255,255,255,0);
}</pre>
</div>
5、pc端与移动端字体大小的问题
<div class="cnblogs_code">
<pre>html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6 {
-webkit-text-size-adjust:100%;
}</pre>
</div>
6、圆角bug 某些Android手机圆角失效 
<div class="cnblogs_code">
<pre>background-clip:padding-box;</pre>
</div>
<div class="cnblogs_code">
<pre>transiton闪屏
/*设置内联的元素在3D空间如何呈现：保留3D*/
-webkit-transform-style:preserve-3D;

/*设置进行转换的元素的背面在面对用户时是否课件：隐藏*/
-webkit-backface-visibility:hidden;</pre>
</div>
7、响应式图片
原因：如果包裹div宽度小于图片宽度没有问题，但是如果div宽度大于图片的宽度，图片被拉伸失真 解决方法：让图片最大只能是自己的宽度
<div class="cnblogs_code">
<pre>img{
max-width: 100%;
display: block;
margin: 0 auto;
}</pre>
</div>
8、禁止复制、选中文本
<div class="cnblogs_code">
<pre>Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}</pre>
</div>
9、去除input默认样式
<div class="cnblogs_code">
<pre>input {
-moz-appearance:textfield;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}</pre>
</div>
10、ios 设置input 按钮样式会被默认样式覆盖
<div class="cnblogs_code">
<pre>input,
textarea {
border: 0;
-webkit-appearance: none;
}</pre>
</div>
11、在移动端修改难看的点击的高亮效果，iOS和安卓下都有效
<div class="cnblogs_code">
<pre>* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}</pre>
</div>
12、select 下拉选择设置右对齐
<div class="cnblogs_code">
<pre>select option {
direction: rtl;
}</pre>
</div>
13、长按图片禁止弹出保存框
<div class="cnblogs_code">
<pre>img{
pointer-events: none;
}</pre>
</div>
14、active兼容处理即伪类：active失效
<div class="cnblogs_code">
<pre><body ontouchstart=''></pre>
</div>
12、关于flex
<div class="cnblogs_code">
<pre>/* css样式 */
.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

/* 水平居中 */
.flexbox-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

/* 垂直居中 */
.flexbox-middle {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;</pre>
</div>
----------------------------------------------------------------------------------真实问题----------------------------------------------------------------------------------
1、IOS下的H5页面会把数字识别成电话号码
<div class="cnblogs_code">
<pre>原因：这是IOS采用Safari浏览器内核的原因，会在数字串加上a标签，并且在a标签里添加属性值tel
解决办法：<meta name = "format-detection" content = "telephone=no"></pre>
</div>
2、new Date（）在IOS上出现值为NAN的问题
<div class="cnblogs_code">
<pre>如：new Date("2017-08-11 12:00:00");
原因：因为IOS下的new Date()不支持"-“这个字符
解决：new Date("2017-08-11 12:00:00".replace(/-/g, "/"));</pre>
</div>
3、点透bug的产生 touchstart早于touchend早于click。即click的触发是由延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏。此时click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接
<div class="cnblogs_code">
<pre>解决：
1.尽量都使用touch事件来替换click事件。例如用touchend事件（推荐）
2.用fastclick
3.用preventDefault阻止a标签的click</pre>
</div>
4、IOS键盘字母输入，默认首字母大写
<div class="cnblogs_code">
<pre><input type="text" autocapitalize="off" /></pre>
</div>
5、ios键盘唤起，键盘收起以后页面不归位 原因：固定定位的元素在元素内 input 框聚焦的时候弹出的软键盘占位失去焦点的时候软键盘消失但是还是占位的导致input框不能再次输入在失去焦点的时候给一个事件； 解决：
<div class="cnblogs_code">
<pre>inpblur(){
let u = navigator.userAgent, app = navigator.appVersion;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
setTimeout(() => {
 const scrollHeight = document.documentElement.scrollTop ||
 document.body.scrollTop || 0
 window.scrollTo(0, Math.max(scrollHeight - 1, 0))
 }, 200)
}
}</pre>
</div>
6、安卓弹出的键盘遮盖文本框【安卓微信H5弹出软键盘后挡住input输入框】 解决办法：给input和textarea标签添加focus事件；
<div class="cnblogs_code">
<pre>inpfocus(){
let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
if(isAndroid){
setTimeout(() => {
 document.activeElement.scrollIntoViewIfNeeded();
 document.activeElement.scrollIntoView();
}, 500);
}
}
方法二：
// window.onresize 监听页面大小变化，该方法只会在安卓执行
window.onresize = function () {
if (document.activeElement.tagName === "INPUT" ||
document.activeElement.tagName === "TEXTAREA") {
let ele = document.activeElement;
setTimeout(()=>{
 ele.scrollIntoView();//焦点元素滚到可视区域的问题
},0);
}
}</pre>
</div>
7、html5调用安卓或者ios的拨号功能 html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了
<div class="cnblogs_code">
<pre><a href="tel:110">110</a></pre>
</div>
8、识别 string 里的 '\n' 并成功换行显示
<div class="cnblogs_code">
<pre>white-space: pre-line;
微信端还是不起作用，没办法只能用正则替换了
xxx.replace(/\n/g, ' ')</pre>
</div>
9、ios12以上，收起键盘页面卡死，造成点击错乱
<div class="cnblogs_code">
<pre>原因：键盘收起时输入框会失焦，因此，监听失焦事件即可
【适用于只有一个输入框的场景】
document.body.addEventListener('focusout', () => {
window.scroll(0, 0);//失焦后强制让页面归位即可
});

【适用于多个输入框的场景】
let isReset = true;//是否归位
document.body.addEventListener('focusin', () => {
isReset = false; //聚焦时键盘弹出，焦点在输入框之间切换时，会先触发上一个输入框的失焦事件，再触发下一个输入框的聚焦事件
});
document.body.addEventListener('focusout', () => {
isReset = true;
setTimeout(() => {
 //当焦点在弹出层的输入框之间切换时先不归位
if (isReset) {
 window.scroll(0, 0);//确定延时后没有聚焦下一元素，是由收起键盘引起的失焦，则强制让页面归位
 }
}, 300);
});</pre>
</div>
10、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常 ios当前页面分享给好友，点击进来是正常，如果二次分享，则跳转到首页；使用vue router跳转到第二个页面后在分享时，分享设置失败；以上安卓分享都是正常
<div class="cnblogs_code">
<pre>原因：jssdk是后端进行签署，前端校验，但是有时跨域，ios是分享以后会自动带上 from=singlemessage&isappinstalled=0 以及其他参数
解决办法：
1、将页面this.$router.push跳转改为window.location.href去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功（适合分享的页面不多的情况下，作为一个单单页运用，这样刷新页面跳转，还是..）
2、把入口地址保存在本地，等需要获取签名的时候取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！</pre>
</div>
11、桌面图标
<div class="cnblogs_code">
<pre><link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" /></pre>
</div>
12、较为齐全meta标签
<div class="cnblogs_code">
<pre>
<meta charset='utf-8'> 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 

<meta name="description" content="不超过150个字符"/> 

<meta name="keywords" content=""/> 

<meta name="author" content="name, email@gmail.com"/> 

<meta name="robots" content="index,follow"/> 

<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">



<meta name="apple-mobile-web-app-title" content="标题"> 

<meta name="apple-mobile-web-app-capable" content="yes"/> 

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 

<meta name="apple-mobile-web-app-status-bar-style" content="black"/> 

<meta name="format-detection" content="telphone=no, email=no"/> 


<meta name="renderer" content="webkit"> 

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<meta http-equiv="Cache-Control" content="no-siteapp" /> 

<meta name="HandheldFriendly" content="true"> 

<meta name="MobileOptimized" content="320"> 

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app"> 

<meta name="msapplication-tap-highlight" content="no"> 

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>




<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>




<meta name="msapplication-TileColor" content="#000"/>

<meta name="msapplication-TileImage" content="icon.png"/>


<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>




<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end --</pre>
</div>
13、比较常用的meta标签
<div class="cnblogs_code">
<pre><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no"/>
<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
<meta http-equiv="pragma" content="no-cache"/></pre>
</div>
14、对比各大厂meta结合项目实际情况选择所需meta标签
<div class="cnblogs_code">
<pre>各大厂移动端页面 meta
1、天猫
<meta name="aplus-terminal" content="1"/>
<meta name="apple-mobile-web-app-title" content="TMALL"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telephone=no, address=no">

2、淘宝
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="telephone=no,email=no" name="format-detection"/>
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

3、京东
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta name="Keywords" content="">
<meta name="description" content="">

4、网易网
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta content="telephone=no" name="format-detection" />
<meta name="keywords" content="" />
<meta name="description" content="" />

5、百度
<meta name="referrer" content="always">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">

苹果设备专有meta:
1、京东meta:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<!—禁止之别电话号码和邮箱—>
<meta name=”format-detection” content=”telephone=no,email=no”>
2、淘宝meta：
<meta content=”yes” name=”apple-mobile-web-app-capable”>
<!–点击页面区域全屏展示—>
<meta content=”yes” name=”apple-touch-fullscreen”/>
<meta content=”telephone=no,email=no” name=”format-detection”/>
<!–应用信息，保留系统历史记录，运动效果–>
<meta name=”App-Config” content=”fullscreen=yes,useHistoryState=yes,transition=yes”/></pre>
</div>
15、移动端常用的工具、插件等
<div class="cnblogs_code">
<pre>vConsole：手机前端开发调试利器
better-scroll ：可能是目前最好用的移动端滚动插件
lib-flexible：移动端弹性布局适配解决方案
cssrem：一个CSS值转REM的VSCode插件
fastclick：解决移动端click 300ms延迟 vant ui库（推荐） vux 库 Mint UI 库等常用的 
vue-lazyload 图片懒加载插件
// 全局注册
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
error: require('./assets/close.svg'),
loading: require('./assets/loading.svg'),
attempt: 1,
});
// 使用
<img v-lazy="src.img" :alt="src.title" width="100%"></pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：鱼樱前端，转载请注明原文链接：https://www.cnblogs.com/lhl66/p/13951394.html 
来源：https://www.cnblogs.com/lhl66/p/13951394.html

頁: [1]

琼殿技术论坛's Archiver

移动端开发遇到的问题以及解决方案以及开发经验（多半是样式造成的兼容性问题在Android和ios表现出入）