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端的兼容性问题总结相关推荐

h5端呼起摄像头扫描二维码并解析
2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...
百度 Hydra 工具在移动端 UI 兼容性测试上的高效应用
导读:尽管自动化测试技术日新月异,但是自动化case构建成本.执行稳定性等问题的存在,使手工测试依然移动端质量保证的重要手段.传统手工测试必须通过人工操作的方式执行测试用例,效率提升依赖测试人员的操作 ...
移动端UI兼容性测试利器-Hydra
导读:尽管自动化测试技术日新月异,但是自动化case构建成本.执行稳定性等问题的存在,使手工测试依然移动端质量保证的重要手段.传统手工测试必须通过人工操作的方式执行测试用例,效率提升依赖测试人员的操作 ...
百度Hydra工具在移动端UI兼容性测试上的高效应用
导读:尽管自动化测试技术日新月异,但是自动化case构建成本.执行稳定性等问题的存在,使手工测试依然移动端质量保证的重要手段.传统手工测试必须通过人工操作的方式执行测试用例,效率提升依赖测试人员的操作 ...
移动端浏览器兼容性测试
App兼容性测试-小程序兼容性测试-H5兼容性测试-Alltesting|泽众云测试Alltesting泽众云测试为您定制自动化测试脚本App测试.小程序测试.H5页面,将AI与自动化能力结合,覆盖到 ...
html不同平台,基于H5端自定义平台怎么使用和H5端不一样的index.html？
当前配置版本 { "@dcloudio/uni-app-plus": "^2.0.0-26920200403001", "@dcloudio/uni ...
一次失败的尝试，h5+Api 结合 react,webpack,同时生成android 、ios、h5端代码
vue 项目写多了,觉得不能一成不变,想去外面的世界看看.所以尝试了一把react开发,嗯~ o(￣▽￣)o 就在想做一个webApp吧,脚手架也自己搭一个吧.然后脚手架搭建完,项目可以正式开始了,自 ...
uni-app 2.2 发布，大幅度优化 H5 端性能体验 | 技术头条
作者 | uni-app团队责编 | 伍杏玲 uni-app 自发布以来,已经服务了几十万开发者.但让我们意外,有大量开发者用uni-app只编写H5版,并没有多端发布. 这其实也符合uni-app ...
移动端页面兼容性问题解决方案整理（一）
移动端页面兼容性问题解决方案整理(一) 参考文章: (1)移动端页面兼容性问题解决方案整理(一) (2)https://www.cnblogs.com/changningios/p/6486610.h ...

H5端的兼容性问题总结

H5端的兼容性问题总结相关推荐

最新文章

热门文章