像素3（移动端web中适配之viewport）
简介原由：
因为移动设备屏幕比较小，前期分辨率也比较低，
那么桌面网页在手机完全显示就得缩放，太小导致看不清楚。
然后弄了个虚拟窗口（viewport），内容都在虚拟窗口显示，
屏幕容不下那么就滑动，
一个内容可能被分割在设备屏幕的右边和下边，滑动太不方便
于是将虚拟窗口设置成屏幕的大小，
那么内容要重新设计符合屏幕大小，
不同设备的屏幕大小是不一样的，
如何适配。
关于这个虚拟窗口不同时期和状态有个专门说法：
layout viewport：布局视口（移动浏览器默认显示内容虚拟窗口，一般比屏幕窗口大，不同浏览器大小还不一样）
visual viewport：视觉视口（即：屏幕窗口大小，布局视口大于视觉视口就会出现滚动条）
ideal viewport：理想视口（内容窗口完全契合屏幕窗口大小）
具体做法：
在网页的<head>中增加一个meta标签： <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
各自的意思：
width=device-width ：虚拟窗口设成设备屏幕的宽度 initial-scale=1.0：初始虚拟窗口缩放比例是屏幕的1.0倍（也就是一样大） user-scalable=yes：yes表示用户可以调整缩放比例 minimum-scale=0.5：0.5表示用户可以调最小的缩放比例为设备屏幕的0.5倍 maximum-scale=2.0：2.0表示用户可以调最大的缩放比例为设备屏幕的2.0倍
所有要想虚拟窗口和屏幕始终一样大那么就可以：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
其中width=device-width和initial-scale=1是一样的，为什么还都写上。
据说因为兼容性的一个问题： 如果只是竖屏使用，随便一个都可以。 如果横屏： 设置width=device-width那么iPhone，ipad，虚拟窗口的宽度不是手机的长度而依然是竖屏时候宽度（也就是手机的宽度大小），也就是不是满屏的效果。 设置initial-scale=1 那么windows phone 上的IE 虚拟窗口宽度依然是竖屏的宽度。 所有为了横屏满屏就都写上。 感觉想非只写一个的话，貌似Windows手机比较少，那就不管： <meta name="viewport" content="initial-scale=1">
浙公网安备 33010602011771号