移动前端开发——网页适配并响应不同的分辨率的设备

要在移动设备上进行网页开发，只有明白移动设备上的 viewport ，并且掌握跟 viewport 有关的 meta 标签的使用，才能更好地让网页适配或响应各种不同分辨率的移动设备。

viewport

  移动设备上的 viewport 就是设备屏幕上能用来显示网页的区域。

  视口当前可见的部分叫做可视视口（visual viewport） 。
可视视口可能会比布局视口（layout viewport ）更小，因为当用户缩小浏览器缩放比例时，布局视口不变，而可视视口变小了 。

  ideal viewport 是最适合移动设备的 viewport，ideal viewport 的宽度等于移动设备的屏幕宽度，只要在 css 中把某一元素的宽度设为 ideal viewport 的宽度(单位用 px)，那么这个元素的宽度就是设备屏幕的宽度了

css 中的 1px 并不等于设备的 1px

  css 中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css 中的 1px 所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中可以忽略这个问题，但在移动设备上必须弄明白这点。

利用 meta 标签对 viewport 进行控制

移动设备默认的 viewport 是 layout viewport，，但在进行移动设备网站的开发时，我们需要的是 ideal viewport，最常见的的一个动作就是把下面这个东西复制到我们的 head 标签中

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
// 让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
// 如果不这样的设定的话，默认会使用那个比屏幕宽的默认viewport，即出现横向滚动条。

缩放是相对于 ideal viewport 来进行缩放的。

visual viewport 宽度 = ideal viewport 宽度 / 当前缩放值

当前缩放值 = ideal viewport 宽度 / visual viewport 宽度

  如果 width 和 initial-scale=1 同时出现，并且还出现了冲突，浏览器会取它们两个中较大的那个值。

  为什么两个都要写？因为只写一个的话，iphone、ipad 以及 IE 会横竖屏不分，通通以竖屏的 ideal viewport 宽度为准，两者都写上去就 initial-scale=1 解决了 iphone、ipad 的毛病，width=device-width 则解决了 IE 的毛病。

在 iphone 和 ipad 上，无论你给 viewport 设的宽的是多少，如果没有指定默认的缩放值，则 iphone 和 ipad 会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说 viewport 的宽度就是屏幕的宽度)的目的。

动态改变 meta viewport 标签

方法一：

使用document.write来动态输出meta viewport标签
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

方法二

<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>

方法三

      (function (doc, win) {
        var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize', // 监听是否是有屏幕翻转的动作
          recalc = function () {
            var clientWidth = docEl.clientWidth > 1024 ? 1024 : docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = clientWidth / 3.75 + 'px';
          };
        win.addEventListener(resizeEvt, recalc, false);
        recalc();
      })(document, window);