视口：visual viewport、layout viewport、ideal viewport 与 viewport属性

素颜马尾好姑娘i 2022-11-16 10:48 354阅读 0赞

**目录**

一、视口

1、定义

2、分类

1.布局视口（layout viewport）

2.视觉视口(visual viewport)

3.理想视口(ideal viewport)

二、meta视口标签

1、主要目的

2、写法

三、viewport

1、概念

2、具体用法

3、常见设置

4、相关属性的使用

--------------------

# 一、视口 #

## 1、定义 ##

浏览器显示页面内容的屏幕区域。

## 2、分类 ##

### 1.布局视口（layout viewport） ###

*  layout viewport ：网页的所有内容，他可以全部或者部分展示给用户。

### 2.视觉视口(visual viewport) ###

*  visual viewport ：当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。

### 3.理想视口(ideal viewport) ###

*  ideal viewport：理想情况下的viewport，不需要用户缩放和横向滚动条就能正常查看网页的所有内容，并且能够看清所有文字，无论这个文字在css中定义为多小，显示出来时可以看清的。

--------------------

# 二、meta视口标签 #

## 1、主要目的 ##

布局视口的快读与理想视口的宽度一致，即设备有多宽，我们布局的视口有多宽。

## 2、写法 ##

写于head里面，title前面，最为推荐的写法。

--------------------

# 三、viewport #

## 1、概念 ##

移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。

## 2、具体用法 ##

使用该meta标签时，在content中写属性，用逗号隔开。

## 3、常见设置 ##

## 4、相关属性的使用 ##

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:middle;width:108.6pt;">属性</td> 
 <td style="vertical-align:middle;width:478.2pt;">描述</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">width</td> 
 <td style="vertical-align:middle;">控制视口的宽度，可以指定数字；或设置device-width来指定</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">height</td> 
 <td style="vertical-align:middle;">控制视口的高度，这个属性不太重要，很少使用</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">initial-scale</td> 
 <td style="vertical-align:middle;">控制页面最初加载时的在在idealviewport下缩放等级，通常设为1，可以是小数</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">maximum-scale</td> 
 <td style="vertical-align:middle;">允许用户的最大缩放值，为一个数字，可以带小数</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">minimum-scale</td> 
 <td style="vertical-align:middle;">允许用户的最小缩放值，为一个数字，可以带小数</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">user-scalable</td> 
 <td style="vertical-align:middle;">是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">target-densitydpi</td> 
 <td style="vertical-align:middle;">值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个</td> 
 </tr> 
 </tbody> 
</table>