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之移动平台资源

上一篇:pageContext中page、request、session、application四种范围变量的用法。


下一篇:移动APP自动化测试框架对比