视口概念
A viewport represents the area in computer graphics being currently viewed.In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc. That is the part of the document you are viewing.
- On larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser window.
- On most mobile devices and when the browser is in fullscreen mode, the viewport is the entire screen.
- In fullscreen mode（全屏模式）, the viewport（视口） is the device screen（设备屏幕）, the window is the browser window（浏览器窗口）, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport.
The web contains two viewports, the layout viewport and the visual viewport.
- layout viewport（布局视口）：The area within the
Window.innerHeightandWindow.innerWidthof the web document. - visual viewport（视觉视口）：the part of the web page that is currently visible in the browser and can change.
两者区别
- 本质区别
- PC端布局：本质是让页面文档能够在PC端浏览器上正常地显示，由于PC端浏览器窗口一般较大，网页文档的视口大小一般就是浏览器窗口的大小
- 移动端布局：本质是让文档在不同硬件分辨率的移动设备上正常地显示，如果按照PC端的视口要求，则会出现文档有较大一部分无法在视觉视口内显示，只能频繁拖动滚动条，因此一般会让页面的视口大小根据移动端设备屏幕大小自适应
- 兼容性区别
- PC端布局：一般不用考虑硬件分辨率的适配，主要考虑网页文档对不同浏览器是否兼容，尤其是部分CSS新特性的兼容性以及对IE浏览器的兼容性
- 移动端布局：移动端一般不用考虑浏览器兼容性问题，因为不论是Android还是IOS手机，浏览器都是webkit内核，可以放心使用CSS新特性，但需要考虑硬件分辨率以及操作系统的适配，因为不同厂商的手机设备像素比是不同的
- 布局方案区别
- PC端布局：常采用传统静态布局（普通流+float+position）、响应式布局（百分比+媒体查询）
- 移动端布局：常采用flex布局、rem布局
- 事件区别
- PC端：一般会有鼠标操作的事件，但缺少部分基于移动端设备的事件，例如触屏操作、唤起手机键盘等
- 移动端：可以通过触屏实现点击操作，但缺少PC端基于鼠标具有的事件功能，例如hover事件
物理分辨率和逻辑分辨率
-
物理分辨率:硬件所支持的,屏幕出厂就无法改变
-
逻辑分辨率:软件可以达到的,前端开发中写的就是逻辑分辨率
-
理想视口：使用的设备有多宽，所展示的页面就有多宽
HTML中如何修改视口属性
<meta name="viewpoint" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
