移动端视口介绍

视口(viewport)

是用来约束网站中最顶级块元素的，它决定了html的大小

pc端设备

参照浏览器窗口的大小，视口不大重要

//获取视口
var clientWidth = document.documentElement.clientWidth;
var clienthight = document.documentElement.clientHight;

视口对pc端影响
1.如果确定具体的宽高值，当超出viewport的大小的时候，会出现滚动条
2.如果设置的宽度为100%,当子元素宽高大于父容器的时候，会自动换行
3.如果不想出现滚动条或者换行，可以将子元素设置为父容器的百分比

移动端设备

 在移动设备上 viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸。

各个移动端不同视口标准

三种视口

布局视口

视口与浏览器窗口的宽度一致，但在手机上，视口与移动端浏览器屏幕宽度是不关联的。试想下，在小屏幕的移动端设备下，如果使视口与移动端浏览器屏幕宽度一致

总结：在手机上，视口与屏幕宽度并无关联，这跟桌面上是相反的。我们称该视口为布局视口。

视觉视口

用户正在看到的网站的区域，注意是网站的区域（重要的事情说三遍）。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了。

理想视口

一个手机或平板浏览器的布局宽度为768-1024像素。这对于手机的窄屏来说并不理想。换句话说，布局视口 的默认宽度并不是一个理想的宽度。因此理想视口被引进了。

总结：
1、在桌面浏览器上，浏览器窗口与视口的宽度一致，而视口（CSS标准文档中称为“初始包含块”）是CSS百分比宽度推算的根源，因此，浏览器窗口是约束CSS布局的视口；

2、在手机上，有两个视口，布局视口会限制CSS布局；视觉视口决定用户看到的网站内容；

3、移动端浏览器还有个理想视口，它是对特定设备上的特定浏览器的布局视口的一个理想尺寸；

4、可以把布局视口尺寸定义为理想视口。这也是响应式设计的基础