移动端兼容
css 篇
移动端的 1px
问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。
产生原因：首先先要了解一个概念：DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 逻辑像素的比值。目前主流的屏幕 DPR=2 或者 3。CSS 中设置的 px 是逻辑像素,这就造成 1px 变成物理像素的 2px 或者 3px，比如 2 倍屏，设备的物理像素要实现 1 像素，所以 CSS 逻辑像素只能是 0.5px。
下面介绍最常用的方法
通过CSS :before 选择器或CSS :after 选择器设置height:1px，同时缩放 0.5 倍实现。
/* 底边框 */.b-border { position: relative;}.b-border:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #d9d9d9; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;}
/* 四条边 */.setBorderAll { position: relative; &:after { content: ' '; position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: left top; box-sizing: border-box; border: 1px solid #e5e5e5; border-radius: 4px; }}复制代码
复制代码
CSS 动画页面闪白,动画卡顿
问题描述：CSS 动画页面闪白,动画卡顿
解决方法: 1.尽可能地使用合成属性 transform 和 opacity 来设计 CSS3 动画，不使用 position 的 left 和 top 来定位 2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);复制代码
复制代码
屏蔽用户选择
禁止用户选择页面中的文字或者图片
div { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}复制代码
复制代码
清除输入框内阴影
问题描述：在 iOS 上，输入框默认有内部阴影 解决方式：
input { -webkit-appearance: none;}复制代码
复制代码
禁止保存或拷贝图像
img { -webkit-touch-callout: none;}复制代码
复制代码
输入框默认字体颜色设置
设置 input 里面 placeholder 字体的颜色
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { color: #c7c7c7;}input:-moz-placeholder,textarea:-moz-placeholder { color: #c7c7c7;}input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #c7c7c7;}复制代码
复制代码
用户设置字号放大或者缩小导致页面布局错误
设置字体禁止缩放
body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important;}复制代码
复制代码
android 系统中元素被点击时产生边框
部分 android 系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0) -webkit-user-modify:read-write-plaintext-only; }复制代码
复制代码
iOS 滑动不流畅
ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。
.wrapper { -webkit-overflow-scrolling: touch;}复制代码
复制代码
2.设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。
body { overflow-y: hidden;}.wrapper { overflow-y: auto;}复制代码
复制代码
html 篇
常用的 meta 属性设置
meta 对于移动端的一些特殊属性，可根据需要自行设置
<meta content="telephone=no" name="format-detection" /> //禁止 iOS 识别长串数字为电话<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转<meta content="email=no" name="format-detection" /> //不让 Android 手机识别邮箱<meta name="format-detection" content="telephone=no" /> //禁止电话号码识别<meta name="full-screen" content="yes"> //全屏显示<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> //H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="apple-mobile-web-app-capable" content="yes" /> //当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari ios7.0版本以后，safari上已看不到效果 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 复制代码
复制代码
a 标签唤起原生应用
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a> //唤起邮箱
<a href="tel:123456">123456</a> //唤起电话复制代码
复制代码
js 篇
iPhone7 用 for...in 遍历数组失效
问题描述：最初学习使用 js 时，觉得for...in遍历比for循环简洁，后期在用户反馈后发现 iPhone7 不支持用 for...in 遍历数组
解决方式： 改为for循环遍历
移动端点击事件 300 ms 延迟问题
问题描述：移动端 web 网页是有 300ms 延迟的，往往会造成按钮点击延迟甚至是点击失效。
解决方式：
audio 和 video 在 ios 和 andriod 中自动播放
出于优化用户体验，苹果系统和安卓系统通常都会禁止自动播放和禁止页面加载时使用 JS 触发播放，必须由用户主动点击页面才可以触发播放。通过给页面根元素加 touchstart 的监听事件实现触发播放
$('html').one('touchstart', function() { audio.play()})复制代码
复制代码
iOS 上拉边界下拉出现空白
问题描述：手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。
产生原因：在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。
解决方式：
document.body.addEventListener( 'touchmove', function(e) { if (e._isScroller) return // 阻止默认事件 e.preventDefault() }, { passive: false })复制代码
复制代码
ios 日期转换 NAN 的问题
将日期字符串的格式符号替换成'/'
'yyyy-MM-dd'.replace(/-/g, '/')复制代码
复制代码
软键盘问题
iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
解决方式：可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');复制代码
复制代码
IOS 键盘弹起挡住原来的视图
解决方式：
可以通过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。
true，则元素将在其所在滚动区的可视区域中居中对齐。
false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。
window.addEventListener('resize', function() { if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) { window.setTimeout(function() { if ('scrollIntoView' in document.activeElement) { document.activeElement.scrollIntoView(false) } else { document.activeElement.scrollIntoViewIfNeeded(false) } }, 0) }})复制代码
复制代码
onkeyUp 和 onKeydown 兼容性问题
IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件
IOS12 输入框难以点击获取焦点，弹不出软键盘
定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改
FastClick.prototype.focus = function(targetElement) { var length if ( deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' ) { length = targetElement.value.length targetElement.setSelectionRange(length, length) targetElement.focus() } else { targetElement.focus() }}复制代码
复制代码
IOS 键盘收起时页面没用回落，底部会留白
通过监听键盘回落时间滚动到原来的位置
window.addEventListener('focusout', function() { window.scrollTo(0, 0)})
//input输入框弹起软键盘的解决方案。var bfscrolltop = document.body.scrollTop$('input') .focus(function() { document.body.scrollTop = document.body.scrollHeight //console.log(document.body.scrollTop); }) .blur(function() { document.body.scrollTop = bfscrolltop //console.log(document.body.scrollTop); })
复制代码
复制代码
IOS 下 fixed 失效
问题描述：软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。 解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll
<body> <div class='warper'> <div class='main'></div> <div> <div class="fix-bottom"></div></body>复制代码
复制代码
.warper { position: absolute; width: 100%; left: 0; right: 0; top: 0; bottom: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; }.fix-bottom { position: fixed; bottom: 0; width: 100%;}
复制代码
最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163 相互学习，我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激 ！
评论