移动端常见bug汇总
前⾔
本⽂是摘录整理了移动端常见的⼀些bug以及解决⽅案，第⼀篇，后⾯还会有持续的⽂章更新整理。
点击样式闪动
Q: 当你点击⼀个链接或者通过Javascript定义的可点击元素的时候，它就会出现⼀个半透明的灰⾊背景。
A：根本原因是-webkit-tap-highlight-color，这个属性是⽤于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜⾊。建议写在样式初始化中以避免所以问题：div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出现蓝⾊边框：outline:none；
-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;
// i.e . Nexus5/Chrome and Kindle Fire HD 7 ''
-webkit-tap-highlight-color : transparent ;
屏蔽⽤户选择
Q: 禁⽌⽤户选择页⾯中的⽂字或者图⽚
A：代码如下
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
移动端如何清除输⼊框内阴影
Q: 在iOS上，输⼊框默认有内部阴影，但⽆法使⽤ box-shadow 来清除，如果不需要阴影，可以这样关闭：
A：代码如下
-webkit-appearance: none;
禁⽌⽂本缩放
Q: 禁⽌⽂本缩放
A：代码如下
-webkit-text-size-adjust: 100%;
input标签placeholder属性
如何禁⽌保存或拷贝图像
Q: 如何禁⽌保存或拷贝图像
A：代码如下
img{
-webkit-touch-callout: none;}
解决字体在移动端⽐例缩⼩后出现锯齿的问题
Q: 解决字体在移动端⽐例缩⼩后出现锯齿的问题
A：代码如下
-webkit-font-smoothing: antialiased;
设置input⾥⾯placeholder字体的⼤⼩
Q: 设置input⾥⾯placeholder字体的⼤⼩
A：代码如下
::-webkit-input-placeholder{ font-size:10pt;}
audio元素和video元素在ios和andriod中⽆法⾃动播放
Q: audio元素和video元素在ios和andriod中⽆法⾃动播放
A：代码如下，触屏及播放
$('html').one('touchstart',function(){
audio.play()
})
⼿机拍照和上传图⽚
Q: 针对file类型增加不同的accept字段
A：代码如下
<input type="file">的accept 属性
<!-- 选择照⽚ -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
输⼊框⾃动填充颜⾊
Q: 针对input标签已经输⼊过的，会针对曾经输⼊的内容填充黄⾊背景，这是webkit内核⾃动添加的，对应的属性是autocomplete，默认是on，另对应的样式是input:-webkit-autofill 且是不可更改的。
A:⽅案如下1 设置标签的autocomplete="off"，亲测⽆效可能2 设置盒⼦的内阴影为你常态的颜⾊（下⾯以⽩⾊为例）
box-shadow:0 0  0 1000px  #fff inset ;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
开启硬件加速
Q: 优化渲染性能
A：代码如下
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
⽤户设置字号放⼤或者缩⼩导致页⾯布局错误
body
{
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
移动端去除type为number的箭头
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{      -webkit-appearance: none !important;
margin: 0;
}
实现横屏竖屏的⽅案
var evt = "onorientationchange" in window ? "orientationchange" : "resize";    window.addEventListener(evt, function() {
var width = document.documentElement.clientWidth;
var height =  document.documentElement.clientHeight;
$print =  $('#print');
if( width > height ){
$print.width(width);
$print.height(height);
$print.css('top',  0 );
$print.css('left',  0 );
$print.css('transform' , 'none');
$print.css('transform-origin' , '50% 50%');
}
else{
$print.width(height);
$print.height(width);
$print.css('top',  (height-width)/2 );
$print.css('left',  0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
}
}, false);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。