移动端适配（rem & viewport）--移动端开发整理笔记（四）

移动端适配

通过rem适配

• em： 根据元素自身的字体大小来计算自己的尺寸

• rem： (root em) 根据根节点(html)的字体大小来计算自己的尺寸

  我们知道，在不同的手机设备，分辨率大小是不一样的。为了使页面在不同分辨率下等比缩放，需要动态的设置Html的字体大小来达到页面等比缩放的效果。我们可以如下设置rem值：

	function() {
		var html = document.querySelector("html");
		var width = html.getBoundingClientRect().width;
		html.style.fontSize = width / 16 + "px";
		//  width / 16  html的字体大小 = 屏幕宽度的16分之一 = 1rem 
	}

注意： 因为页面的字体大小最小为12px，因此要保证rem不小于12

通过viewport适配

  移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

devicePixelRatio

   在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题。

ideal viewport

  移动端的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类。其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。

把viewport宽度设置为 ideal viewport 的宽度

  只需要把width设为width-device这个特殊的值。通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

也可以设置initial-scale=1达到同样的效果，缩放是相对于ideal viewport来缩放的：

<meta name="viewport" content="initial-scale=1">

如果 width 和 initial-scale=1同时写的话，浏览器会取它们两个中较大的那个值。同时 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

<meta name="viewport" content="width=device-width, initial-scale=1">

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