meta-viewport

相关动态REM的文章

移动端高清、多屏适配方案
使用Flexible实现手淘H5页面的终端适配

viewport

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

viewport的meta标签常用于移动端，那么content中的每个属性都表示什么呢

<meta> - mdn

先看mdn中的解释：

image.png

可以了解到，content中的属性用来定义layout viewport的size和scale level

接下来看每个属性的意义：

1. width=device-width
   表示viewport的宽度为设备宽度，注意，如果meta中只有指定这个属性，那么其他属性就会被浏览器推测出来
   例如：
   现在使用<meta name=viewport content="width=320">，在iphone4上，由于iphone4的device-width设备宽度是320px，所以initial-scale就是为1，如果在iphone6上，iphone6的device-width是375px，那么initial-scale就是375/320

2. initial-scale=1
   表示scale ratio为1，例如，设备的device-width为375px，那么viewport就是375，如果只设置initial-scale，其实就表示width=device-width，注意: 如果initial-scale和width同时设置，会取计算后大的那一个
   例如：
   使用<meta name=viewport content="width=375, initial-scale=1">，在iphone6中，viewport的width就是375，如果在iphone6p，就是414，因为initial-scale=1，iphone6p的device-width是414，所以最后取大的一个就是414，如果在iphone5中，就是375，因为iphone5的device-width是320，所以initial-scale=1计算出来就是320，但是width是375，所以取375

3. miximum-scale、minimum-scale
   因为scale是可以被浏览器根据推测出来的，所以这两个属性可以起到限制作用，默认最小值是0.25，最大值是5

4. user-scalable=no
   不让用户手动缩放，因为已经适配好了

参考

Configuring the Viewport - Safari Web Content Guide，这段是浏览器推测的行为，How Safari Infers the Width, Height, and Initial Scale
Using the viewport meta tag to control layout on mobile browsers
移动前端开发之viewport的深入理解