H5端的兼容性问题总结

Posted 2022-05-23 老张在线敲代码

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>