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

Posted AiTing on the way

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端页面利用好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">‘);
    })();

 

以上是关于移动端页面利用好viewport,适配各种宽度屏幕的主要内容,如果未能解决你的问题,请参考以下文章

移动端的适配整理

移动端适配问题

移动端适配的问题

H5在移动端尺寸适配方案

移动端web自适应适配布局解决方案

移动端各种分辨率手机屏幕----适配方法集锦