移动端开发遇到的问题以及解决方案以及开发经验（多半是样式造成的兼容性问题在Android和ios表现出入）
首先先谈下基本的样式存在的问题影响
1、上下拉动滚动条时卡顿、慢（Android3+和iOSi5+支持CSS3的新属性为overflow-scrolling）
body{
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
}
2、长时间按住页面出现闪退
element{
-webkit-touch-callout:none;
}
3、iphone及ipad下输入框默认内阴影
element{
-webkit-appearance:none;
}
4、ios和android下触摸元素时出现半透明灰色遮罩
element {
-webkit-tap-highlight-color:rgba(255,255,255,0);
}
5、pc端与移动端字体大小的问题
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6 {
-webkit-text-size-adjust:100%;
}
6、圆角bug 某些Android手机圆角失效
background-clip:padding-box;
transiton闪屏
/*设置内联的元素在3D空间如何呈现：保留3D*/
-webkit-transform-style:preserve-3D;
/*设置进行转换的元素的背面在面对用户时是否课件：隐藏*/
-webkit-backface-visibility:hidden;
7、响应式图片
原因：如果包裹div宽度小于图片宽度没有问题，但是如果div宽度大于图片的宽度，图片被拉伸失真
解决方法：让图片最大只能是自己的宽度
img{
max-width: 100%;
display: block;
margin: 0 auto;
}
8、禁止复制、选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
9、去除input默认样式
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
10、ios 设置input 按钮样式会被默认样式覆盖
input,
textarea {
border: 0;
-webkit-appearance: none;
}
11、在移动端修改难看的点击的高亮效果，iOS和安卓下都有效
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
12、select 下拉选择设置右对齐
select option {
direction: rtl;
}
13、长按图片禁止弹出保存框
img{
pointer-events: none;
}
14、active兼容处理 即 伪类：active失效
<body ontouchstart=''>
12、关于flex
/* 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;
----------------------------------------------------------------------------------真实问题----------------------------------------------------------------------------------
1、IOS下的H5页面会把数字识别成电话号码
原因：这是IOS采用Safari浏览器内核的原因，会在数字串加上a标签，并且在a标签里添加属性值tel
解决办法：<meta name = "format-detection" content = "telephone=no">
2、new Date（）在IOS上出现值为NAN的问题
如：new Date("2017-08-11 12:00:00");
原因：因为IOS下的new Date()不支持"-“这个字符
解决：new Date("2017-08-11 12:00:00".replace(/-/g, "/"));
3、点透bug的产生
touchstart早于touchend早于click。即click的触发是由延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏。此时click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接
解决：
1.尽量都使用touch事件来替换click事件。例如用touchend事件（推荐）
2.用fastclick
3.用preventDefault阻止a标签的click
4、IOS键盘字母输入，默认首字母大写
<input type="text" autocapitalize="off" />
5、ios键盘唤起，键盘收起以后页面不归位
原因：固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件；
解决：
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)
}
}
6、安卓弹出的键盘遮盖文本框【安卓微信H5弹出软键盘后挡住input输入框】
解决办法：给input和textarea标签添加focus事件；
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);
}
}
7、html5调用安卓或者ios的拨号功能
html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了
<a href="tel:110">110</a>
8、识别 string 里的 '\n' 并成功换行显示
white-space: pre-line;
微信端还是不起作用，没办法只能用正则替换了
xxx.replace(/\n/g, '<br>')
9、ios12以上，收起键盘页面卡死，造成点击错乱
原因：键盘收起时输入框会失焦，因此，监听失焦事件即可
【适用于只有一个输入框的场景】
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);
});
10、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常
ios当前页面分享给好友，点击进来是正常，如果二次分享，则跳转到首页；使用vue router跳转到第二个页面后在分享时，分享设置失败；以上安卓分享都是正常
原因：jssdk是后端进行签署，前端校验，但是有时跨域，ios是分享以后会自动带上 from=singlemessage&isappinstalled=0 以及其他参数
解决办法：
1、将页面this.$router.push跳转改为window.location.href去跳转，而不使用路由跳转，这样可以使地址栏的地址与当前页的地址一样，可以分享成功（适合分享的页面不多的情况下，作为一个单单页运用，这样刷新页面跳转，还是..）
2、把入口地址保存在本地，等需要获取签名的时候 取出来，注意：sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存！
11、桌面图标
<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" />
12、较为齐全meta标签
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<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"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->
<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->
<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<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 --
13、比较常用的meta标签
<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"/>
14、对比各大厂meta结合项目实际情况选择所需meta标签
各大厂移动端页面 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”/>
15、移动端常用的工具、插件等
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%">
