移动设备视口概念viewport

视口指的是移动设备中的设备屏幕窗口。

在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是咱们说的设备大小），另外一种是视窗视口（网页的宽度是多少）。什么是可见视口，什么又是视窗视口呢？此处举一个例子：若是咱们的屏幕是320像素*480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度可以展现980像素宽度的内容。那么320像素的宽度就是可见视口的宽度，而可以显示的980像素的宽度就是视窗视口的宽度。

 

为了显示更多的内容，大多数的浏览器会把本身的视窗视口扩大，简易的理解，就是让本来320像素的屏幕宽度可以容下980像素甚至更宽的内容（将网页等比例缩小）。

常见viewport数值

• iPhone：980
• iPad：1024
• Android：980
• WinPhone：1024

为了让用户可以看清晰设备中的内容，所以咱们并不让浏览器按照默认的viewport进行展现。此时就须要进行设置，要尽可能保持分辨率和媒体设备视口大小比例为1：1，从而获得最佳的显示效果。

进行视口的设置有两种不一样的方法，一种是在meta标签当中，进行视口的设置，经过调整属性值设置视口的具体大小。另外一种是使用@viewport进行设置。相比之下，meta更加好用且兼容良好。所以，在此我仅讲解第一种设置方法。

窗口默认显示效果

 

 

欢迎你们互相学习交流。独行冰海

设置视口

将视口设置为320像素

当前的显示状态

 

将视口设置为设备宽度

将视口设置为设备宽度，并在最初的时候以放大2倍的方式显示

将视口设置为设备宽度，并容许缩放，最大放大到2倍，最小缩小到1/2

将视口设置为设备宽度，并禁止缩放

视口的相关知识点

• width 设定布局视口宽度
• height 设定布局视口高度
• initial-scale 设定页面初始缩放比例（0-10.0）
• user-scalable 设定用户是否能够缩放（yes/no）
• minimum-scale 设定最小缩小比例（0-10.0）
• maximum-scale 设定最大放大比例（0-10.0）
• target-densitydpi* 设定目标屏幕的dpi（device-dpi）

结束~！