移动端页面利用好viewport,适配各种宽度屏幕

最近研究微贷网的移动端代码,发现他们网站在适配不同宽度屏幕的显示情况时,发现他们并不是利用rem单位,而是利用js动态设置mete的viewport来达到适配的效果。

感觉挺不错的,也不需要计算什么东西,单位继续用px.代码分享下:

// 计算缩放比例
    (function () {
      var phoneScale = parseInt(window.screen.width) / 375;
      document.write('<meta name="viewport" content="width=375, minimum-scale=' + phoneScale + ', maximum-scale=' + phoneScale + ', user-scalable=no">');
    })();

bootstrap中推荐的适配:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
原文地址:https://www.cnblogs.com/LChenglong/p/8744803.html