【移动端】常见CSS兼容问题及解决方案

【移动端】常见CSS兼容问题及解决⽅案

【移动端】常见CSS 兼容问题及解决⽅案

1. 安卓浏览器看背景图⽚，有些设备会模糊。

因为⼿机分辨率太⼩，如果按照分辨率来显⽰⽹页，字会⾮常⼩，安卓⼿机devicePixelRatio⽐较乱，有1.5的，有2的也有3的。想让图⽚在⼿机⾥显⽰更为清晰，必须使⽤2x的背景图来代替img标签（⼀般情况都是⽤2倍），或者指定background⼀size:contain；都可以

2. 防⽌⼿机中⽹页放⼤和缩⼩

3. apple⼀mobile⼀web⼀app⼀capable是设置Web应⽤是否以全屏模式运⾏。

4. format⼀detection启动或禁⽤⾃动识别页⾯中的电话号码。

语法：

默认情况下，设备会⾃动识别任何可能是电话号码的字符串。设置telephone=no可以禁⽤这项功能。

5. html5调⽤安卓或者ios的拨号功能

html5提供了⾃动调⽤拨号的标签，只要在a标签的href中添加tel：就可以了。

如下：

拨打⼿机号如下

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

⽅法⼆：js给 document 绑定touchstart或touchend事件

<style>

a {

color: #000;

}

a:active {

color: #fff;

}

</style>

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闪屏

⼀webkit⼀transform⼀style: preserve⼀3d;

⼀webkit⼀backface⼀visibility:hidden;

17. 圆⾓bug

某些Android⼿机圆⾓失效

background⼀clip: padding⼀box;

18. 顶部状态栏背景⾊

说明：

除⾮你先使⽤apple⼀mobile⼀web⼀app⼀capable指定全屏模式，否则这个meta标签不会起任何作⽤。

如果content设置为default，则状态栏正常显⽰。如果设置为blank，则状态栏会有⼀个⿊⾊的背景。如果设置为blank⼀translucent，则状态栏显⽰为⿊⾊半透明。如果设置为default或blank，则页⾯显⽰在状态栏的下⽅，即状态栏占据上⽅部分，页⾯占据下⽅部分，⼆者没有遮挡对⽅或被遮挡。如果设置为blank⼀translucent，则页⾯会充满屏幕，其中页⾯顶部会被状态栏遮盖住（会覆盖页⾯20px⾼度，⽽iphone4和itouch4的Retina屏幕为40px）。默认值是default。

19. 设置缓存

⼿机页⾯通常在第⼀次加载后会进⾏缓存，然后每次刷新会使⽤缓存⽽不是去重新向服务器发送请求。如果不希望使⽤缓存可以设置no⼀cache。

20. 桌⾯图标

iOS下针对不同设备定义不同的桌⾯图标。

图⽚尺⼨可以设定为5757（px）或者Retina可以定为114114（px），ipad尺⼨为72*72（px)

21. 启动画⾯

iOS下页⾯启动加载时显⽰的画⾯图⽚，避免加载时的⽩屏。

可以通过madia来指定不同的⼤⼩：

<!⼀⼀iPhone⼀⼀>

<!⼀⼀ iPhone Retina ⼀⼀>

<!⼀⼀ iPhone 5 ⼀⼀>

<!⼀⼀ iPad landscape ⼀⼀>

<!⼀⼀ iPad Retina portrait ⼀⼀>

entation: portrait) and (⼀webkit⼀device⼀pixel⼀ratio: 2)" rel="apple⼀touch⼀startup⼀image" /> <!⼀⼀ iPad Retina landscape ⼀⼀>

QQ浏览器私有:

//全屏模式

//强制竖屏

//强制横屏

/应⽤模式

UC浏览器私有

//全屏模式

//强制竖屏

//强制横屏

//应⽤模式

其它(针对⼿持设备优化，主要是针对⼀些⽼的不识别viewport的浏览器，⽐如⿊莓)

微软的⽼式浏览器

windows phone 点击⽆⾼光

23. IOS中input键盘事件keyup、keydown、keypress⽀持不是很好

⽤input search做模糊搜索的时候，在键盘⾥⾯输⼊关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进⾏关键词标红。⽤input监听键盘keyup事件，在安卓⼿机浏览器中是可以的，但是在ios⼿机浏览器中变红很慢，⽤输⼊法输⼊之后，并未⽴刻响应keyup事件，只有在通过删除之后才能响应！

解决办法：

可以⽤ html5 的oninput事件去代替keyup

var value = e.target.value;

});

</script>

然后就达到类似keyup的效果！

24. h5⽹站input 设置为type=number的问题

⼀般会产⽣三个问题，⼀个问题是maxlength属性不好⽤了。另外⼀个是form提交的时候，默认给取整了。三是部分安卓⼿机出现样式问题。

问题⼀解决，⽤js如下

function checkTextLength(obj, length) {

if(obj.value.length > length) {

obj.value = obj.value.substr(0, length);

}

问题⼆，是因为form提交默认做了表单验证，step默认是1，要设置step属性，假如保留2位⼩数，写法如下：

关于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按钮样式会被默认样式覆盖

ios13测试版解决⽅式如下：

input,textarea {

border: 0;

⼀webkit⼀appearance: none;

}

设置默认样式为none

26. IOS键盘字母输⼊，默认⾸字母⼤写

解决⽅案，设置如下属性

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>

//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问题

复制代码代码如下:

有的浏览器可能要点击两遍！

35. 部分机型存在type为search的input，⾃带close按钮样式修改⽅法

有些机型的搜索input控件会⾃带close按钮（⼀个伪元素），⽽通常为了兼容所有浏览器，我们会⾃⼰实现⼀个，此时去掉原⽣close按钮的⽅法为

#Search::⼀webkit⼀search⼀cancel⼀button{

【移动端】常见CSS兼容问题及解决方案

发布评论取消回复

最近发表

热门文章

标签列表