记笔记——2019-03-21 本文已影响0人
奕生奕世_3503
visual viewport：可以在通过window.innerWidth获取，表示浏览器窗口可以显示出多少个CSS像素，所以是以px为单位的。
layout viewport：布局视口，顾名思义，就是html的宽度，移动端有自己的默认布局视口宽度，是980px，之所以这样设计的目的是为了让PC端的网页可以在手机上显示出来而不变形，这个布局视口宽度是可以自己设定的。可以通过document.documentElement.clientWidth来获取。
width=device-width：这里的width是布局视口的宽度，device-width是设备以常规CSS像素为单位时可以显示的宽度，是一个出厂后就固定的值，比如iPhone7就是375px。这句话就是把默认的980px的布局视口变成了和浏览器一样宽，比如375px。
scale：我们知道CSS像素是一个抽象的单位，一个CSS像素等于几个设备像素和设备的DPR有关，当然，CSS像素是可以缩小放大的，scale就是对本页面的CSS像素进行缩放。比如，在iPhone7上，设备像素比是2，那么一个CSS像素就代表着2个设备像素，而添加initial-scale=0.5后，一个CSS像素就等于一个设备像素了，就是说，插入<metaname="viewport"content="width=device-width,initial-scale=.5,maximum-scale=.5,minimum-scale=.5,user-scalable=no">后，布局视口就变成了750px了。
min-wdith:自适应时，常用到@media query，这里的width就是指布局视口layout viewport的宽度，如果插入了<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">的话，此时的布局视口宽度就是设备宽度，那么就可以直接用min-width来区分不同的设备了，比如iPhone7是375px，而iPhone7Plus是414px。
visual viewport：可以在通过window.innerWidth获取，表示浏览器窗口可以显示出多少个CSS像素，所以是以px为单位的。
layout viewport：布局视口，顾名思义，就是html的宽度，移动端有自己的默认布局视口宽度，是980px，之所以这样设计的目的是为了让PC端的网页可以在手机上显示出来而不变形，这个布局视口宽度是可以自己设定的。可以通过document.documentElement.clientWidth来获取。
width=device-width：这里的width是布局视口的宽度，device-width是设备以常规CSS像素为单位时可以显示的宽度，是一个出厂后就固定的值，比如iPhone7就是375px。这句话就是把默认的980px的布局视口变成了和浏览器一样宽，比如375px。
scale：我们知道CSS像素是一个抽象的单位，一个CSS像素等于几个设备像素和设备的DPR有关，当然，CSS像素是可以缩小放大的，scale就是对本页面的CSS像素进行缩放。比如，在iPhone7上，设备像素比是2，那么一个CSS像素就代表着2个设备像素，而添加initial-scale=0.5后，一个CSS像素就等于一个设备像素了，就是说，插入<metaname="viewport"content="width=device-width,initial-scale=.5,maximum-scale=.5,minimum-scale=.5,user-scalable=no">后，布局视口就变成了750px了。
min-wdith:自适应时，常用到@media query，这里的width就是指布局视口layout viewport的宽度，如果插入了<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">的话，此时的布局视口宽度就是设备宽度，那么就可以直接用min-width来区分不同的设备了，比如iPhone7是375px，而iPhone7Plus是414px。
