欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3之移动平台资源

程序员文章站 2024-03-25 11:24:22
...

随着移动端越来越普及,前端技术也是百花齐放,但目前移动平台的技术已经趋向于成熟,记得刚实习的时候就是接触的移动端,但现在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


更多专业前端知识,请上【猿2048】www.mk2048.com
相关标签: h5/css