1，在网页的<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：表示初始的缩放比例 minimum-scale=0.5：表示最小的缩放比例 maximum-scale=2.0：表示最大的缩放比例 user-scalable=yes：表示用户是否可以调整缩放比例
如果是想要一打开网页，则自动以原始比例显示，并且不允许用户拖动和放大缩小的话，则是：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
ideal viewport：即为手机屏幕大小。也就是内容大小和屏幕大小刚好一样。
1.1，补充：width=device-width：
通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度， 但要注意的是，
在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。
1.2，补充：initial-scale=1：
initial-scale用于指定页面的初始缩放比例，缩放是相对于 ideal viewport来进行缩放的， 因此当initial-scale=1时，表示将layout viewport的宽度设置为 ideal viewport的宽度。
<meta name="viewport" content="initial-scale=1" /> 可以知道initial-scale=1 也能把当前的viewport宽度变成 ideal viewport 的宽度， 但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。
总结1.1和1.2：
要把当前的viewport宽度设为ideal viewport的宽度， 既可以设置 width=device-width，也可以设置 initial-scale=1，
但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。 所以，最完美的写法应该是，两者都写上去，
这样就
initial-scale=1 解决了 iphone、ipad的毛病，
width=device-width则解决了IE的毛病。 <meta name="viewport" content="width=device-width,initial-scale=1">
1.3，width 和 initial-scale=1同时出现，并且还出现了冲突呢
当遇到这种情况时，浏览器会取它们两个中较大的那个值。 例如，当width=400，ideal viewport的宽度为320时，取的是400； 当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。
1.4，关于minimum-scale=1, maximum-scale=1，user-scalable=no
下面两者一样： <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 或者 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 可以看到第二段代码我们把minimum-scale=1, maximum-scale=1这两个属性去掉了，但效果是一样的， 因为添加了user-scalable=no 那么，minimum-scale=1, maximum-scale=1这两个属性就没必要追加了。 因为你都已经禁止了用户缩放页面了，允许的缩放范围也就不存在了。
总结：
1，所有的scale指令都是相对于ideal viewport的。
无视layout viewport设置了多少，所以maximum-scale=3意味着最大的缩放值是ideal viewport的300%
2，layout viewport能被设置成ideal viewport。width=device-width和initial-scale=1指令可以做到。
3，针对某个设备的ideal viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的，
这是因为市场上虽然有不同分辨率，不同型号的手机，但是他们的ideal viewport是十分接近的。
4，ideal viewport会随设备转向而改变。如Iphone 5s 尺寸为320*568。在竖屏模式下宽度为320px，而在横屏模式下宽度为568px。
资料：
2，视口（viewport）
ps:内容显示的大小。
手机默认的layout-viewport是多大呢，“layout viewport有多宽？
每个浏览器都不一样，
Safari iPhone为980px， Opera为850px， Android WebKit为800px， IE为974px。”
viewport指视口，浏览器上(或一个app中的webview)显示网页的区域。
在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，
这是因为移动设备的分辨率相对于PC来说都比较小，
所以为了能在移动设备上正常显示那些为PC浏览器设计的网站，
移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，由设备本身决定），
但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。
PC端的视口是浏览器窗口区域，
而移动端的则存在三个不同的视口：
layout viewport：布局视口（ps:移动浏览器显示内容的区域大小）
visual viewport：视觉视口（ps:屏幕区域的大小，布局视口大于视觉视口就会出现滚动条）
ideal viewport：理想视口（ps:内容区域完全契合设备窗口大小）
layout viewport 布局视口
在PC端的网页的layout viewport即浏览器页面显示的整个区域， 也可以理解成网页的绘制区域。 而在移动端由于其屏幕较小，无法全部显示PC端页面的全部内容， 所以默认情况下(不用<meta name="viewport">去控制)， 移动端会指定一个大于其浏览器显示区域layout viewport，一般是980px
layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。
visual viewport 视觉视口
visual viewport，顾名思义指浏览器可视区域，即我们在移动端设备上看到的区域。
网页的实际绘制区域视口大小layout viewport比我们在手机上可以看到的大小要大，所以我们手机端视觉视口会出现横向滚动条。
visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。
ideal viewport 理想视口（ps:布局视图和视觉视口的平衡）
所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，
不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，
如所有iphone的理想视口宽度都为320px，
安卓设备的理想视口有320px、360px等等。
3，视口的控制
手机默认的layout-viewport是多大呢，“layout viewport有多宽？每个浏览器都不一样，Safari iPhone为980px，Opera为850px，Android WebKit为800px，最后IE为974px。”
虽然viewport解决了我们的一些问题,但是它也为我们带来了一些遗留问题.
那就是对于那些专门针对手机设计的页面,我们如果不设置viewport的大小的话,那么会使得我们的网页内容整体缩小了
作者：小貔
链接：https://www.jianshu.com/p/f3cb6c1a49dd
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。