做网页设计时各类浏览器的兼容问题导至让人崩溃，如当时的IE6，IE7，IE8，各类浏览器需要用不同样式去匹配，后来开发人员终于鼓起勇气不做IE兼容。

后来微软经过慎重考虑，终于在WIN10发布时，废掉IE浏览器，让系统自带EDGU浏览器，可能EDGU也是能和chrome媲美的浏览器，不过微软的IE浏览器口碑实在太差劲了，曾经IE浏览器时代后期，大部分市场给火狐占领，而现在基本给chrome占领。

而做小程序开发时，最让人恶心的就是苹果的刘海屏了，这绝对是反人类的设计，没有一点实用价值，还得让开发人员要去匹配样式。

微信小程序开发视屏组件时，这个满屏效果也是需要用WXSS样式去控制的，这个并不像HTML组件直接给定宽高或自动适应。

微信小程序vodeo组件只能通过WXSS去控制宽高，代码如下：

wxml代码：

<video id="myVideo" src="{{news_url}}" show-fullscreen-btn="false" object-fit="" show-play-btn="{{true}}" poster="{{news_img}}"></video>

wxss代码：

#myVideo{

  position: absolute;

  width: 750rpx;

  height: 1196rpx;

  background: #cdcdcd;

  overflow: hidden;

  flex-direction:column;

  align-items:center;/*垂直居中*/

  justify-content: center;/*水平居中*/

  z-index: 1;

}

这样是以苹果6分辨率作为开发参考，如下图：

经过测试，以上效果在苹果六手机是没有问题的，但是在苹果11手机并不能实现自动适应，还是得加上js代码去控制才可以。

实现方法如下，

wxml代码:

<video id="myVideo" style="height:{{height}}px;" class="goodsimg-info" src="{{news_url}}" show-fullscreen-btn="true" show-play-btn="{{true}}" poster="{{news_img}}"></video>

增加了变量height,用JS去控制高度。

js代码：

wx.getSystemInfo({

      success: function (res) {

        that.setData({

          height: res.windowHeight - 69,

        });

      }

    });
通过wx.getsysteminfo去取屏的高度，再减去顶部的标题栏，这样基本就能兼容所类手机，在苹果6手机和苹果11手机是没有全屏兼容的。