H5端的兼容性问题总结

Posted 老张在线敲代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5端的兼容性问题总结相关的知识,希望对你有一定的参考价值。

1. ios input button背景色不起作用的
解决办法:

input[type=button], input[type=submit], input[type=file], button  cursor: pointer; -webkit-appearance: none;  
background改成background-color

2. H5点击事件时会有闪频效果
解决办法:给html 或者body加上·如下代码

 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  

3. ios元素盒子下边框不显示

ios个别机型,元素设置的下边框被遮挡或未显示。

解决方法:

给盒子父元素添加高度撑起来。

4. 移动端如何定义字体font-family

@ 宋体      SimSun
@ 黑体      SimHei
@ 微信雅黑   Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体    NSimSun
@ 新细明体  MingLiU
@ 细明体    MingLiU
@ 标楷体    DFKai-SB
@ 仿宋     FangSong
@ 楷体     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷体_GB2312  KaiTi_GB2312  

5. 取消input在ios下,输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

6. 屏幕旋转的事件和样式

//JS处理
function orientInit()
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
    if(orientChk =='lapdscape')
        //这里是横屏下需要执行的事件
    else
        //这里是竖屏下需要执行的事件
    


orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function()
    setTimeout(orientInit, 100);
,false)    

//CSS处理
//竖屏时样式
@media all and (orientation:portrait)   
//横屏时样式
@media all and (orientation:landscape)   

7. audio元素和video元素在ios和andriod中无法自动播放

//音频,写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

//音频,写法二
<audio controls="controls"> 
    <source src="music/bg.ogg" type="audio/ogg"></source>
    <source src="music/bg.mp3" type="audio/mpeg"></source>
    优先播放音乐bg.ogg,不支持在播放bg.mp3
</audio>

//JS绑定自动播放(操作window时,播放音乐)
$(window).one('touchstart', function()
    music.play();
)

//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () 
    music.play();
, false);

//小结
//1.audio元素的autoplay属性在IOS及android上无法使用,在PC端正常
//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间

8. 旋转屏幕时,字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 
-webkit-text-size-adjust:100%;

9. 圆角bug
某些Android手机圆角失效

background-clip: padding-box;

10. 顶部状态栏背景色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

11. html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。
如下:

<a href="tel:10010">10010</a>

以上是关于H5端的兼容性问题总结的主要内容,如果未能解决你的问题,请参考以下文章

关于移动端的键盘兼容性总结

安卓APP载入HTML5页面解决方式总结

安卓APP加载HTML5页面解决方案总结

安卓APP加载HTML5页面解决方案总结

H5的兼容问题总结

移动端的Bootstrap到底怎么样