最新文章：
- 什么是静态服务器
- npx是什么东东，跟npm有啥关系？
- AMD宣布将在全球范围内裁员4%
- 处理Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.警告
- 什么是原子化CSS
移动端兼容问题（一）
发布时间:2017年12月03日 评论数：抢沙发阅读数： 8111
【UC浏览器】video标签脱离文档流
场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。
测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。
Demo：http://t.cn/zj3xiyu
解决方案：不使用transform属性。translate用top、margin等属性替代。
【UC浏览器】video标签总在最前
场景：<video>标签总是在最前（可以理解为video标签的z-index属性是Max）。
测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。
【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象
场景：设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。
在8.6的版本,这个情况直接出现。
在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。
测试环境：UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。
【QQ手机浏览器】不支持HttpOnly
场景：带有HttpOnly属性的Cookie，在QQ手机浏览器版本从4.0开始失效。JavaScript可以直接读取设置了HttpOnly的Cookie值。
测试环境：QQ手机浏览器 4.0/4.1/4.2 + Android 4.0 。
【MIUI原生浏览器】浏览器地址栏hash不改变
场景：location.hash 被赋值后，地址栏的地址不会改变。
但实际上 location.href 已经更新了，通过JavaScript可以顺利获取到更新后的地址。
虽然不影响正常访问，但用户无法将访问过程中改变hash后的地址存为书签。
测试环境：MIUI 4.0
【Chrome Mobile】fixed元素无法点击
场景：父元素设置position: fixed;
子元素设置position: absolute;
此时，如果父元素/子元素还设置了overflow: hidden 则出现“父元素遮挡该子元素“的bug。
视觉(view)层并没有出现遮挡，只是无法触发绑定在该子元素上的事件。可理解为：「看到点不到」。
补充： 页面往下滚动，触发position: fixed;的特性时，才会出现这个bug，在最顶不会出现。
测试平台： 小米1S，Android4.0的Chrome18
解决办法： 把父元素和子元素的overflow: hidden去掉。
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />（部分安卓手机的UC浏览器写完以后还是可以放大缩小）
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />（ios上会明显 有时候会把数字当成电话号码）
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;} （ios上的下拉框会有圆角，所以要写border-radius:0）
安卓浏览器看背景图片，有些设备会模糊。
用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？
经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。
想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100*100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。
代码可以如下：
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
或者指定 background-size:contain;
长时间按住页面出现闪退
element {
-webkit-touch-callout:none;
}
设置页面缓存
<meta http-equiv="Cache-Control"content="no-cache"/>
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
IOS键盘字母输入，默认首字母大写
解决方案，设置如下属性
<input type="text"autocapitalize="off"/>
本文地址： https://arbays.com/post/52 本文已被百度收录！
版权声明：若无注明，本文皆为“富录-前端开发|web技术博客”原创，转载请保留文章出处。