css3之移动平台资源

随着移动端越来越普及，前端技术也是百花齐放，但目前移动平台的技术已经趋向于成熟，记得刚实习的时候就是接触的移动端，但现在2年多来，期间遇到了很多莫名其妙的问题，见证了手机用户量的突飞猛进，兴喜的是更多的人能见识到自己做的东西，这也是我一直一来的动力，当然也迎来了前所未有的挑战，机型层出不穷，比如OV一个月迭代一次的速度，也是比较可怕的。

下面列举一下一些常用问题的调整技巧：

safari浏览器下

去掉input输入框半阴影效果（这是IOS的默认样式）：

input{-webkit-appearance:none;}

链接图片禁止触发长按回调：

.css {
  -webkit-touch-callout: none;
}

去掉元素点击半透明边框：

.css {
  -webkit-tap-highlight-color: transparent;
}

表单内容禁止选中：

.css {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}

表单内容禁止拖放：

.css {
  -webkit-user-drag: none;
}

修改placeholder颜色：

input::-webkit-input-placeholder {
  color: #999999;
}

去掉android输入框的语音键：

input::-webkit-input-speech-button {
  display: none;
}

去掉input输入框首字母大写的问题：

<input autocapitalize="off" autocorrect="off" />

去掉input输入框自动填充的问题（密码输入框，验证码输入框）：

<input autocomplete="false"/>

input数字键盘唤起（iOS无小数点，android有，需要非法输入校验）：

<input type="text" pattern="[0-9]*">

去掉input获取焦点高亮：

input:focus {
  outline: none;
}

去掉textarea右下角小箭头：

textarea {
  resize: none;
}

拍照摄影功能：

<input type="file" capture="camera" accept="image/*">
<input type="file" accept="video/*">

微信浏览器字体颜色改不了：

.css {
  -webkit-text-fill-color: #999999;
}

滚动不流畅：

.css {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

硬件加速：

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

Android webview上默认data-dpr="1"，这是因为android手机普遍采用LCD屏，

但实际dpr可能不止是1，大部分是2，也可能是3，屏幕尺寸却还是一倍图尺寸

iOS webview上默认data-dpr="2"或者data-dpr="3"，这是因为iOS普遍采用高清屏，

实际dpr就是data-dpr的值，屏幕尺寸为dpr值 X 1倍图尺寸

这里对DPR倍图适配的媒体查询上要有所区别，data-dpr只能是对屏幕是否为高清屏做区分，而对LCD屏的划分不是很准确，首先对于iOS的适配肯定是需要DPR做倍图划分的，而iPhoneX Retina屏的出现导致DPR的值是无法准确估计的，因此iOS适配上采用最小DPR去适配效果会好一些，而Android上各个LCD屏幕最大的DPR都是固定的，因此iOS和Android的媒体查询区别如下：

//android
@media only screen and (-webkit-max-device-pixel-ratio: @dpr) {

}
//ios
@media only screen and (-webkit-min-device-pixel-ratio: @dpr) {

}

当然另外一个有意思的地方是Android上部分机型可以适配非公开属性-webkit-device-pixel-ratio，对应的值为-webkit-max-device-pixel-ratio

css3之移动平台资源

猜你喜欢