20210429 ---- 浅谈视口

最新推荐文章于 2024-03-10 08:25:32 发布

什么也不会却想做前端

最新推荐文章于 2024-03-10 08:25:32 发布

阅读量300

点赞数 2

分类专栏： CSS HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/csdndas/article/details/116278546

版权

CSS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

本文详细讲解了物理像素、逻辑像素和设备独立像素的区别，以及布局视口、视觉视口和理想视口在移动端设计中的作用。通过实例介绍如何设置视口元标签以实现响应式设计，包括viewport元标签的常见属性及其应用技巧。

摘要由CSDN通过智能技术生成

目录

1.概念引入

2.几种像素区分

1).物理像素（设备像素，device pixels）

1).布局视口（layout viewport）

2).视觉视口（visual viewport）

3).理想视口（ideal viewport）

4.视口设置

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

1.概念引入

要把PC端网页引入手机，分两步

1.把电脑端的网站放到一个虚拟容器中，注意，这个虚拟容器的宽度是人为规定的。

2.把这个虚拟容器放到手机里。

此时若页面尺寸超过虚拟容器尺寸，页面尺寸就会被改变。（若小于虚拟容器尺寸，则按原来大小显示。）

我们把这个虚拟容器叫做视口。

（很早之前，电脑的分辨率比较低，写一个电脑端的网站都是980px。为了让980px的网站可以在手机完美显示出来，人为地把这个虚拟容器的宽度定了980px。

ex：如果电脑端的网站整体的宽度也是980px，就会正好放到这个虚拟容器中；如果电脑端的网站宽度大于980px，你的网站在这个虚拟容器中就会产生一个水平滚动条；如果电脑端的网站宽度小于980px，

这个虚拟容器也可以放下。）

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

2.几种像素区分

像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多，同一范围内能看到的内容就越多。或者说，当设备尺寸相同时，像素越密集，画面就越精细。

1).物理像素（设备像素，device pixels）

指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。

实际为手机或电脑屏上的发光点。叫物理分辨率，也叫物理像素。

（如：iphone6的分辨率1334*750，在水平方向上有750个发光点，在垂直方向上有1334个发光点。）

在开发时，不关心物理像素

2).逻辑像素（CSS像素）

在写CSS代码时，写的像素叫逻辑像素，如：

box
{width:100px,
height:100px;}

逻辑像素是CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。

如果用户进行了放大，那么一个 CSS 像素还将跨越更多的物理像素。

3).设备独立像素

设备独立像素（又称设备无关像素 Device Independent Pixels 、密度独立性 Density Independent或设备独立像素，简称DIP或DP）是一种物理测量单位，基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序使用，转换为物理像素的应用。

典型的用途是允许移动设备软件将信息显示和用户交互扩展到不同的屏幕尺寸。允许应用程序以抽象像素为单位进行测量，而底层图形系统将应用程序的抽象像素测量值转换为适合于特定设备的物理像素。

注

在电脑端：1个逻辑像素等于 1个物理像素；但是在手机端就不一样了。

设物理像素为2000*1000，水平2000个发光点，垂直1000个发光点；

设备独立像素为1000*500。

则1设备独立像素能映射4物理像素，即4个发光点。

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

3.三种视口

移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。

因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。

1).布局视口（layout viewport）

一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

如果要显式设置布局视口，可以使用 HTML 中的 meta 标签：

<meta name="viewport" content="width=400">

2).视觉视口（visual viewport）

视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。

视觉视口和缩放比例的关系为：

当前缩放值 = 理想视口宽度 / 视觉视口宽度

所以，当用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。

3).理想视口（ideal viewport）

布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。

理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。

用下面的方法可以使布局视口与理想视口的宽度一致：

<meta name="viewport" content="width=device-width">

实际上，这就是响应式布局的基础。

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

4.视口设置

我们可以使用视口元标签（viewport meta 标签）来进行布局视口的设置。

<meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1">

下面是每个属性的详细说明：

属性名	取值	描述
width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义放大最大比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义缩小最小比例，它必须大于或等于minimum-scale设置
user-scalable	yes / no	定义是否允许用户手动缩放页面，默认值 yes