最新文章:

您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > 移动端兼容问题(一)

移动端兼容问题(一)

发布时间: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"/>


二维码加载中...
本文作者:DGF      文章标题: 移动端兼容问题(一)
本文地址: https://arbays.com/post-52.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论