viewport实现html页面动态缩放

香菊网 发表于: 2019-10-15 分类: 前端front  js部分  H5部分  

前言:

   有时候我们的项目是px来写的,但是没有屏幕宽度适配 所以宽度只能是固定宽度,在手机上不好适配。

   viewport: “视口”,它表示的是用户网页的可视范围(指页面能够被浏览的范围)。

优点:

   动态 viewport 就是 在你对老项目不用更改原来像素单位的前提下,由viewport的 scale属性来对页面进行对应的缩放,一样可以达到我们想要的效果

原理:

   我们在调试工具里面的时候 一般都是iphone 这样当我们其实是在375的屏幕下开发完成的,

   这样的情况下 当我们想在 任何屏幕 下看大相同的页面的时候 scale = window.screen.width / 375  然后重新设置为meta的viewport的默认缩放就行了。

代码:

<script>
  /*
  *
  * 原来的尺寸   if                       414
  * 设计稿尺寸   375    375
  * 比例                                 414/375
  */
 window.onload = function () {
  refresh ()
  window.addEventListener('resize', function() {
    refresh ()
  })
  function refresh () {
    var curWidth = window.screen.width;
    var targetWidth = 375;
    var scale = (curWidth/targetWidth).toFixed(2);
    var meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content = 'initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+',user-scalable=0';
    document.head.appendChild(meta);
  }
 }
</script>

说明: 

  设置后可以看到 宽度为375px的元素 在任何屏幕下都全屏了

标签: 前端frontjs部分H5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮