前端开发兼容问题汇总

参考文章
一、高度计算问题-100vh不同浏览器处理机制不同
pc端的浏览器就很简单，因为浏览器的内容区域是不包含上方导航栏的，此时的html的100vh=100%；

但是移动端浏览器会包含顶部地址栏和底部按钮栏，不同的浏览器厂家处理的逻辑是不同的，现在测试的为：Safari，安卓和iOS手机的chrome，华为浏览器的100vh都是全屏，包括上下手机浏览器自己的bar，也是页面会被bar覆盖，此时内容区域=100vh-导航栏-按钮栏，但是导航栏和按钮栏高度不一致也不易获取，所以采用100%比较合理。

二、Webrtc 不同浏览器兼容问题
官方案例：https://webrtc.github.io/samples/

注意事项：

网页在浏览器中调用手机的摄像头都需要用户授权，因此用户如果拒绝授权，那么调用会失败；

调用摄像头必须要https协议才可以调用成功；

不同移动端手机支持情况：

ios：Safari，其他的浏览器在iOS中均无法调用

Android：微信浏览器，chrome，Firefox，QQ浏览器

三、大屏幕和小屏幕的兼容设置问题
在页面高度上做区分，设计图以iPhone7为模版去设计，可以上下兼容安卓和苹果的长短屏，在做一屏页面适配时，一是采取百分比的方式去计算高度和宽度，二是以媒体查询的方式在不同尺寸下做页面布局的修改。

欢迎转载，转载需带着文章出处链接~~