前端开发兼容问题汇总-webrtc兼容

2020年5月13日 火辣辣%1 $ S
一、高度计算问题-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为模版去设计,可以上下兼容安卓和苹果的长短屏,在做一屏页面适配时,一是采取百分比的方式去计算高度和宽度,二是以媒体查询的方式在不同尺寸下做页面布局的修改。

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注