最新文章:
- 处理Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.警告
- 什么是原子化CSS
- 一些关键的SEO优化建议和操作步骤
- 如何优化Vue3应用的性能
- Vue3中watch 和 watchEffect有什么区别
移动端兼容问题(一)
发布时间:2017年12月03日 评论数:抢沙发阅读数: 8045
【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.html  本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。