整理了一下工作中遇到的移动端 web 开发常见的问题，解决方案不一定是最完美的，欢迎指正。
HTML
- video 禁止全屏播放
<video x-webkit-airplay="true" webkit-playsinline="true" playsinline="true"></video>
CSS
- 去除点击元素产生背景或边框
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
- 禁止长按链接与图片弹出菜单
a, img {
-webkit-touch-callout: none;
}
- 禁止用户选中图片或文字
body {
-webkit-user-select: none;
}
- 禁用 webkit 内核浏览器的文字大小调整功能
body {
-webkit-text-size-adjust: none;
}
- 去除表单元素默认样式
input {
-webkit-appearance: none;
outline: none;
}
- 改变输入框 placeholder 的颜色
::-webkit-input-placeholder {
color: #999;
}
input:focus::-webkit-input-placeholder {
color: #999;
}
- line-height=height 在部分安卓手机不垂直居中，显示偏上
p {
line-height: normal;
padding: 10px 0;
}
- 屏幕旋转的事件和样式
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
window.addEventListener(resizeEvt, function(){}, false);
// 竖屏时样式
@media all and (orientation:portrait){}
// 横屏时样式
@media all and (orientation:landscape){}
JS
- iOS 中不支持”2000-01-01 00:00:00”格式，返回 NaN
var time = "2000-01-01 00:00:00";
time = time.replace(/\-/g, "/"); // 将时间格式的'-'转成'/'形式，兼容 iOS
- iOS 中 active 点击态样式不生效
document.body.addEventListener('ontouchstart', function(){})
其他
- 滚动穿透，当有 fixed 的背景遮罩层时，滑动屏幕会引起页面的滚动
body.modal-open {
position: fixed;
}
如果只设置这个样式，会导致背景遮罩层弹出时滚动位置丢失，还需要用 js 来保存滚动条的位置
if (showModal) {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
document.body.classList.add('modal-open');
document.body.style.top = -scrollTop +'px';
} else {
document.body.classList.remove('modal-open');
window.scrollTo(0,this.scrollTop);
}
- 输入框被键盘挡住问题
window.addEventListener('resize', function() {
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
window.setTimeout(function() {
if ('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView();
} else {
document.activeElement.scrollIntoViewIfNeeded();
}
}, 0);
}
});
- android 加载 h5 页面部分机型滑动时卡顿回弹
解决办法：开启硬件加速
webView.setLayerType(View.LAYER_TYPE_HARDWARE,null);
不定时更新。
文档信息
- 本文作者：Ji Chao
- 本文链接：https://fehub.net/2019/07/20/web-mobile/
- 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）