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