【移动端】常见CSS兼容问题及解决⽅案
【移动端】常见CSS 兼容问题及解决⽅案
1. 安卓浏览器看背景图⽚,有些设备会模糊。
因为⼿机分辨率太⼩,如果按照分辨率来显⽰⽹页,字会⾮常⼩,安卓⼿机devicePixelRatio⽐较乱,有1.5的,有2的也有3的。想让图⽚在⼿机⾥显⽰更为清晰,必须使⽤2x的背景图来代替img标签(⼀般情况都是⽤2倍),或者指定background⼀size:contain;都可以
2. 防⽌⼿机中⽹页放⼤和缩⼩
<meta name="viewport" content="width=device⼀width, initial⼀scale=1.0, maximum⼀scale=1.0,user⼀scalable=0" />
3. apple⼀mobile⼀web⼀app⼀capable是设置Web应⽤是否以全屏模式运⾏。
<meta name="apple⼀mobile⼀web⼀app⼀capable" content="yes">如果content设置为yes,Web应⽤会以全屏模式运⾏,反之,则不会。content的默认值是no,表⽰正常显⽰;也可以通过只读属性window.navigator.standalone来确定⽹页是否以全屏模式显⽰。
4. format⼀detection启动或禁⽤⾃动识别页⾯中的电话号码。
语法:
<meta name="format⼀detection" content="telephone=no">
默认情况下,设备会⾃动识别任何可能是电话号码的字符串。设置telephone=no可以禁⽤这项功能。
5. html5调⽤安卓或者ios的拨号功能
html5提供了⾃动调⽤拨号的标签,只要在a标签的href中添加tel:就可以了。
如下:
<a href="tel:4008106999,1034">400⼀810⼀6999 转 1034</a>
拨打⼿机号如下
<a href="tel:156********">点击拨打156********</a>
6. 上下拉动滚动条时卡顿、慢
body {
⼀webkit⼀overflow⼀scrolling: touch;
overflow⼀scrolling: touch;
}
Android3+和iOS5+⽀持CSS3的新属性为: overflow⼀scrolling
7. 禁⽌复制、选中⽂本
Element {
⼀webkit⼀user⼀select: none;
⼀moz⼀user⼀select: none;
⼀khtml⼀user⼀select: none;
user⼀select: none;
}
解决移动设备可选中页⾯⽂本(视产品需要⽽定)
8. 长时间按住页⾯出现闪退
element {
⼀webkit⼀touch⼀callout: none;
}
9. iphone及ipad下输⼊框默认内阴影
Element{
⼀webkit⼀appearance: none;
}
10. ios和android下触摸元素时出现半透明灰⾊遮罩
Element {
⼀webkit⼀tap⼀highlight⼀color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰⾊遮罩,备注:transparent的属性值在android下⽆效。
11. active兼容处理即伪类:active失效
⽅法⼀:body添加ontouchstart
<body ontouchstart="">
⽅法⼆:js给 document 绑定touchstart或touchend事件
<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener('touchstart',function(){},false);
</script>
12. 动画定义3D启⽤硬件加速
Element {
⼀webkit⼀transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意:3D变形会消耗更多的内存与功耗
13. Retina屏的1px边框
Element{
border⼀width: thin;
}
14. webkit mask 兼容处理
某些低端⼿机不⽀持css3 mask,可以选择性的降级处理。
⽐如可以使⽤js判断来引⽤不同class:
if( 'WebkitMask' in document.documentElement.style){
alert('⽀持mask');
} else {
alert('不⽀持mask');
}
15. 旋转屏幕时,字体⼤⼩调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
⼀webkit⼀text⼀size⼀adjust:100%;
}
16. transition闪屏
<!-- 设置内嵌的元素在 3D 空间如何呈现:保留3D -->
⼀webkit⼀transform⼀style: preserve⼀3d;
<!-- 设置进⾏转换的元素的背⾯在⾯对⽤户时是否可见:隐藏 -->
⼀webkit⼀backface⼀visibility:hidden;
17. 圆⾓bug
某些Android⼿机圆⾓失效
background⼀clip: padding⼀box;
18. 顶部状态栏背景⾊
<meta name="apple⼀mobile⼀web⼀app⼀status⼀bar⼀style" content="black" />
说明:
除⾮你先使⽤apple⼀mobile⼀web⼀app⼀capable指定全屏模式,否则这个meta标签不会起任何作⽤。
如果content设置为default,则状态栏正常显⽰。如果设置为blank,则状态栏会有⼀个⿊⾊的背景。如果设置为blank⼀translucent,则状态栏显⽰为⿊⾊半透明。如果设置为default或blank,则页⾯显⽰在状态栏的下⽅,即状态栏占据上⽅部分,页⾯占据下⽅部分,⼆者没有遮挡对⽅或被遮挡。如果设置为blank⼀translucent,则页⾯会充满屏幕,其中页⾯顶部会被状态栏遮盖住(会覆盖页⾯20px⾼度,⽽iphone4和itouch4的Retina屏幕为40px)。默认值是default。
19. 设置缓存
<meta http⼀equiv="Cache⼀Control" content="no⼀cache" />
⼿机页⾯通常在第⼀次加载后会进⾏缓存,然后每次刷新会使⽤缓存⽽不是去重新向服务器发送请求。如果不希望使⽤缓存可以设置no⼀cache。
20. 桌⾯图标
<link rel="apple⼀touch⼀icon" href="touch⼀icon⼀iphone.png" />
<link rel="apple⼀touch⼀icon" sizes="76x76" href="touch⼀icon⼀ipad.png" />
<link rel="apple⼀touch⼀icon" sizes="120x120" href="touch⼀icon⼀iphone⼀retina.png" />
<link rel="apple⼀touch⼀icon" sizes="152x152" href="touch⼀icon⼀ipad⼀retina.png" />
iOS下针对不同设备定义不同的桌⾯图标。
<link rel="apple⼀touch⼀icon⼀precomposed" href="touch⼀icon⼀iphone.png" />
图⽚尺⼨可以设定为5757(px)或者Retina可以定为114114(px),ipad尺⼨为72*72(px)
21. 启动画⾯
<link rel="apple⼀touch⼀startup⼀image" href="start.png"/>
iOS下页⾯启动加载时显⽰的画⾯图⽚,避免加载时的⽩屏。
可以通过madia来指定不同的⼤⼩:
<!⼀⼀iPhone⼀⼀>
<link href="apple⼀touch⼀startup⼀image⼀320x460.png" media="(device⼀width: 320px)" rel="apple⼀touch⼀startup⼀image" />
<!⼀⼀ iPhone Retina ⼀⼀>
<link href="apple⼀touch⼀startup⼀image⼀640x920.png" media="(device⼀width: 320px) and (⼀webkit⼀device⼀pixel⼀ratio: 2)" rel="apple⼀touch⼀startup⼀image" />
<!⼀⼀ iPhone 5 ⼀⼀>
<link rel="apple⼀touch⼀startup⼀image" media="(device⼀width: 320px) and (device⼀height: 568px) and (⼀webkit⼀device⼀pixel⼀ratio: 2)" href="apple⼀touch⼀startup⼀image⼀640x1096.png">  <!⼀⼀ iPad portrait ⼀⼀>
<link href="apple⼀touch⼀startup⼀image⼀768x1004.png" media="(device⼀width: 768px) and (orientation: portrait)" rel="apple⼀touch⼀startup⼀image" />
<!⼀⼀ iPad landscape ⼀⼀>
<link href="apple⼀touch⼀startup⼀image⼀748x1024.png" media="(device⼀width: 768px) and (orientation: landscape)" rel="apple⼀touch⼀startup⼀image" />
<!⼀⼀ iPad Retina portrait ⼀⼀>
<link href="apple⼀touch⼀startup⼀image⼀1536x2008.png" media="(device⼀width: 1536px) and (
orientation: portrait) and (⼀webkit⼀device⼀pixel⼀ratio: 2)" rel="apple⼀touch⼀startup⼀image" />  <!⼀⼀ iPad Retina landscape ⼀⼀>
<link href="apple⼀touch⼀startup⼀image⼀1496x2048.png"media="(device⼀width: 1536px) and (orientation: landscape) and (⼀webkit⼀device⼀pixel⼀ratio: 2)"rel="apple⼀touch⼀startup⼀image" /> 22. 浏览器私有及其它meta
QQ浏览器私有:
//全屏模式
<meta name="x5⼀fullscreen" content="true">
//强制竖屏
<meta name="x5⼀orientation" content="portrait">
//强制横屏
<meta name="x5⼀orientation" content="landscape">
/
/应⽤模式
<meta name="x5⼀page⼀mode" content="app">
UC浏览器私有
//全屏模式
<meta name="full⼀screen" content="yes">
//强制竖屏
<meta name="screen⼀orientation" content="portrait">
//强制横屏
<meta name="screen⼀orientation" content="landscape">
//应⽤模式
<meta name="browsermode" content="application">
其它(针对⼿持设备优化,主要是针对⼀些⽼的不识别viewport的浏览器,⽐如⿊莓)
<meta name="HandheldFriendly" content="true">
微软的⽼式浏览器
<meta name="MobileOptimized" content="320">
windows phone 点击⽆⾼光
<meta name="msapplication⼀tap⼀highlight" content="no">
23. IOS中input键盘事件keyup、keydown、keypress⽀持不是很好
⽤input search做模糊搜索的时候,在键盘⾥⾯输⼊关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进⾏关键词标红。⽤input监听键盘keyup事件,在安卓⼿机浏览器中是可以的,但是在ios⼿机浏览器中变红很慢,⽤输⼊法输⼊之后,并未⽴刻响应keyup事件,只有在通过删除之后才能响应!
解决办法:
可以⽤ html5 的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
var value = e.target.value;
});
</script>
然后就达到类似keyup的效果!
24. h5⽹站input 设置为type=number的问题
⼀般会产⽣三个问题,⼀个问题是maxlength属性不好⽤了。另外⼀个是form提交的时候,默认给取整了。三是部分安卓⼿机出现样式问题。
问题⼀解决,⽤js如下
<input type="number" oninput="checkTextLength(this ,10)">
function checkTextLength(obj, length) {
if(obj.value.length > length)  {
obj.value = obj.value.substr(0, length);
}
}
问题⼆,是因为form提交默认做了表单验证,step默认是1,要设置step属性,假如保留2位⼩数,写法如下:
<input type="number" step="0.01" />
关于step:input中type=number,⼀般会⾃动⽣成⼀个上下箭头,点击上箭头默认增加⼀个step,点击下箭头默认会减少⼀个step。number中默认step是1。也就
是step=0.01,可以允许输⼊2位⼩数,并且点击上下箭头分别增加0.01和减少0.01。
假如step和min⼀起使⽤,那么数值必须在min和max之间。
问题三,去除input默认样式
input[type=number] {
⼀moz⼀appearance:textfield;
}
input[type=number]::⼀webkit⼀inner⼀spin⼀button,
input[type=number]::⼀webkit⼀outer⼀spin⼀button {
⼀webkit⼀appearance: none;
margin: 0;
}
25. ios 设置input按钮样式会被默认样式覆盖
解决⽅式如下:
input,textarea {
border: 0;
⼀webkit⼀appearance: none;
}
设置默认样式为none
26. IOS键盘字母输⼊,默认⾸字母⼤写
rotate属性解决⽅案,设置如下属性
<input type="text" autocapitalize="off" />
27. select 下拉选择设置右对齐
设置如下:
select option {
direction: rtl;
}
28. 通过transform进⾏skew变形,rotate旋转会造成出现锯齿现象
可以设置如下:
⼀webkit⼀transform: rotate(⼀4deg) skew(10deg) translateZ(0);
transform: rotate(⼀4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)
29. 移动端点击300ms延迟
300ms导致⽤户体验不是很好,解决这个问题,我们⼀般在移动端⽤tap事件来取代click事件。推荐两个js,⼀个是fastclick,⼀个是tap.js
关于300ms延迟,具体请看:
30. 移动端点透问题
案例如下:
<div id="haorooms">点头事件测试</div>
<a href="[www.jb51](www.jb51/)">[www.jb51](www.jb51/)</a>
//div是绝对定位的蒙层,并且z⼀index⾼于a。⽽a标签是页⾯中的⼀个链接,我们给div绑定tap事件:
$('#haorooms').on('tap',function(){
$('#haorooms').hide();
});
我们点击蒙层时 div正常消失,但是当我们在a标签上点击蒙层时,发现a链接被触发,这就是所谓的点透事件。
原因:
touchstart早于touchend早于click。即click的触发是有延迟的,这个时间⼤概在300ms左右,也就是说我们tap触发之后蒙层隐藏,此时click还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下⾯的a链接上。
解决:
(1)尽量都使⽤touch事件来替换click事件。例如⽤touchend事件(推荐)。
(2)⽤fastclick,参考:
(3)⽤preventDefault阻⽌a标签的click
(4)延迟⼀定的时间(300ms+)来处理事件(不推荐)
(5)以上⼀般都能解决,实在不⾏就换成click事件。
下⾯介绍⼀下touchend事件,如下:
$("#haorooms").on("touchend", function (event) {
event.preventDefault();
});
31. 关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不⼀致等)
iOS 浏览器横屏时会重置字体⼤⼩,设置text⼀size⼀adjust为none可以解决 iOS 上的问题,但桌⾯版 Safari 的字体缩放功能会失效,因此最佳⽅案是将text⼀size⼀adjust为100%。
⼀webkit⼀text⼀size⼀adjust: 100%;
⼀ms⼀text⼀size⼀adjust: 100%;
text⼀size⼀adjust: 100%;
32. 关于 iOS 系统中,中⽂输⼊法输⼊英⽂时,字母之间可能会出现⼀个六分之⼀空格可以通过正则去掉
this.value = place(/\u2006/g, '');
33. 移动端 HTML5 audio autoplay失效问题
这个不是 BUG,由于⾃动播放⽹页中的⾳频或视频,会给⽤户带来⼀些困扰或者不必要的流量消耗,
所以苹果系统和安卓系统通常都会禁⽌⾃动播放和使⽤JS的触发播放,必须由⽤户来触发才可以播放。
解决⽅法思路:先通过⽤户touchstart触碰,触发播放并暂停(⾳频开始加载,后⾯⽤ JS 再操作就没问题了)。
解决代码:
document.addEventListener('touchstart', function () {
});
34. 移动端 HTML5 input date不⽀持placeholder问题
复制代码代码如下:
<input placeholder="Date" class="textbox⼀n" type="text" onfocus="(pe='date')"  id="date">
有的浏览器可能要点击两遍!
35. 部分机型存在type为search的input,⾃带close按钮样式修改⽅法
有些机型的搜索input控件会⾃带close按钮(⼀个伪元素),⽽通常为了兼容所有浏览器,我们会⾃⼰实现⼀个,此时去掉原⽣close按钮的⽅法为
#Search::⼀webkit⼀search⼀cancel⼀button{

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。