1. 苹果手机滑动平缓效果
-webkit-overflow-scrolling:touch;
2. 在IOS中select下拉框会出现黑背景
在IOS中,select下拉框会出现黑背景
-webkit-appearance:none;
background:url() no-repeat right; /*自己添加下拉箭头*/
background-size:;
在IOS中,input会有内阴影
-webkit-appearance:none;
3. 在IOS中input输入框光标会变得巨大
不要给input加高度,加padding撑开就行了
4. 在IOS中li按下会有阴影效果
-webkit-tap-highlight-color: transparent;
5. ios 双击页面缩放 禁止
移动设备升级到iOS10了,发现了自带的Safari浏览器不再识别meta viewport了。以前我们都是用这个标签来让浏览器禁用缩放的。万恶的Apple~~
在iOS10之前都是通过
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
来强制不让手机浏览器缩放的,但是升级到iOS10后Safari不再识别这个meta标签。所以得用js来hack一下:
禁用双指缩放:
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
禁用手指双击缩放:
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
如果在iOS10的Safari中设置了viewport,其实双击放大也是不生效的,所以个人觉得在iOS10上比较好的解决方案是先设置viewport,然后再用js禁用双指缩放即可,无需再设置禁用双击缩放。
如果任何一个子元素的touch事件设置了stopPropagation阻止事件冒泡的话,可能还是会失效,而且在iOS10中你的输入框字体最好不要小于16px,否则iOS在输入框获得焦点时可能还是会强制放大。