【移动端】常见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小时内删除。
发表评论