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);
}
});
持续更新中......