分享一个H5移动端适配方案

什么是viewport什么是viewport-fit?

1
<meta name="viewport" id="view" content="width=750, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

1
2
3
4
<script>
  var viewWidth = window.innerWidth / 750;
  document.getElementById("view").setAttribute('content', 'width=750, initial-scale=' + viewWidth + ', maximum-scale=' + viewWidth + ', minimum-scale=' + viewWidth + ', user-scalable=no, viewport-fit=cover');
</script>
  • 常规的适配就是媒体查询，rem、em，相信大家都清楚了，上面的方法，我是看了斗鱼的网站，我才知道，原来还有这种适配。大家可以随便写个斜面试一试
  • 上面的方案就可以直接去用px了，就不需要rem的换算了，麻烦，比如一张背景图是750 X 1500的，那么这个元素的宽高，就直接写成width:7500px;height:1500px;,其他的交给viewport吧。
  • 后期优化，监听视窗宽度，动态设置缩放比例，利用viewport-fit填充页面，这儿需要注意的是，不是每个屏幕都是矩形的，比如iphone刘海屏，所以填充时要注意这一点。
  • 还有就是可以搭配vh,vw使用