移动端基础知识总结

最新推荐文章于 2021-06-06 19:11:40 发布

哲子君

最新推荐文章于 2021-06-06 19:11:40 发布

阅读量479

点赞数

分类专栏：移动端文章标签： android ios

本文链接：https://blog.csdn.net/zhzijun/article/details/112318618

版权

移动端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

移动端基础知识总结

移动端

移动端

移动端基础

物理像素(设备像素)

1. 概念

如果我们拿着放大镜看屏幕

屏幕就是这个样子的

可以看到：整个屏幕是由一个个的点组成的，每个屏幕上的点一定是有限的，现在的技术还做不到无穷个点组成屏幕。那么这些有限的点就叫做像素，或者叫做物理像素(physical pixel)

如果再放大一些，观察具体的一个像素点

设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，只有屏幕一经出厂就固定不会改变

在iOS设备上，screen.width的值为dip

在安卓以及Windows Phone设备上，screen.width的值为物理像素

2. 特点

在同一个设备上，它的物理像素个数是固定的，这是厂商在出厂时就设置好了的————即一个设备的分辨率是固定的
物理像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个物理像素就对应一个 dip（设备逻辑像素）;
它是物理概念，指的是设备中使用的物理像素(Physic pixel)。这个单位用px表示，它是一个**[相对绝对单位]**
即在同样一个设备上，每1个设备像素所代表的物理长度(如英寸)是固定不变的(即设备像素的绝对性);
但在不同的设备之间，每1个设备像素所代表的物理长度(如英寸)是可以变化的(即设备像素的相对性);

3. 1px=1个物理像素？

css中的1px并不总等于设备的1px

像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
在为桌面浏览器设计的网页中，css的1个像素往往都是对应着电脑屏幕的1个物理像素,所以我们无需对这个津津计较，但在移动设备上，必须弄明白这点。
在早先的移动设备中，屏幕像素密度(PPI)都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
标清屏上，逻辑像素等于设备像素
高清屏上，逻辑像素不等于设备像素

总结：不能使用物理像素表示元素尺寸

分辨率

1.屏幕

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。
通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）

2.分辨率

每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表示形式，就叫做分辨率，设备分辨率的单位就是设备像素

比如，小米11

屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细

所以，我们都喜欢买像素高的手机

分辨率一般用像素来度量 px，表示屏幕水平和垂直方向的像素数
屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向商容乃的像素个数就越多，图像显示就越精细
不同英寸大小的移动设备上，分辨率却相同的原因是因为设备像素的相对性

3.长度单位

在Web开发中可以使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用px（像素）做为长度单位。
我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位。

逻辑像素

CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素

1.概念

CSS像素是没有实际大小的抽象单位，它是一个相对长度，它相对的是电脑或手机显示器的分辨率。

当在页面上设置了`<meta name="viewport" content="width=device-width">`后,`document.documentElement.clientWidth`在大部分浏览器下，得到的是布局视区(layout viewport)的宽度，就等同于dip(逻辑像素)

2.CSS像素(css pixel)特点:

CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。它是一个**[纯相对单位]**
在同样一个设备上，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性);
在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);
- 例如1px，1px所代表的大小是不同的,如下表：
手机类型华为荣耀7 IPhone6
主屏尺寸 5.2英寸 5英寸
分辨率 1920PX*1080PX 1920PX*1080PX
PPI 424PPI 469PPI
在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);
设备像素和CSS像素一般使用px作为单位，并且在桌面浏览器的100%缩放情况下，css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。
但实际情况却并非如此，css像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素的长度是不同的。
在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。
比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

retina-pixel.png

3.环境

在不同的设备或不同的环境中，1px所代表的大小是不同的,如下表：

手机类型	华为荣耀7	IPhone6
主屏尺寸	5.2英寸	5英寸
分辨率	1920PX*1080PX	1920PX*1080PX
PPI	424PPI	469PPI

同样是一英寸，同样都是像素，为啥苹果手机一英寸有469个像素，华为只有424个像素

总结：css中的1px并不是总代表设备像素上的1px，尤其是在移动设备上

css像素和设备像素

1. 设备像素(device pixel):

设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。

2. 逻辑像素：

实际开发中使用的像素

.box{
    width: 2px;  /* 逻辑像素 */
    height: 2px; /* 逻辑像素 */
}

下面是上面盒子在不同屏幕上实际的显示效果

3. 设备像素与CSS像素之间的关系

获得设备像素比（dpr）后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

所以，有如下公式：

DPR = 设备像素/CSS像素

4. 像素换算

CSS像素，与设备无关像素，指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。

我们通过调整浏览器的缩放比例可以直观的理解CSS像素与物理像素之前的对应关系，如下图所示：
在这里插入图片描述

设备像素与CSS像素之间的换算是如何产生的呢？
这就需要要谈到每英寸像素(pixel per inch)和设备像素比(device pixel ratio)。

每英寸像素PPI(pixel per inch)：

1. 概念

PPI(pixels per inch)，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素，这考验一个屏幕厂商的设计和生产能力

ppi，也称作 dpi(dots per inch)

如小米11的 ppi 为 515

屏幕上的像素点也是多，也是密集，则显示就越精细，所以 ppi 是一个屏幕显示效果的重要参数

2. PPI 的计算方法

以小米11为例，计算一下

$\frac{\sqrt{1440^2+3200^2}}{6.81}=515ppi$

下面列出常见机型屏幕参数

http://www.woshipm.com/screen/

3. iOS中处理PPI

首先规定在多高的PPI下1DP等于1px，并以这个PPI作为基准（1x multiplier），如果显示设备的PPI是基准PPI的2倍，那么1DP等于2px（2x multiplier），其实就是简单的小学乘法。

规定：

在iPhone系列中，3G/S为1x multiplier(163PPI)，其他为2x multiplier,Iphone6及以上为3x multiplier
在iPad系列中，iPad 1代和2代为1x multiplier(132PPI)，其他为2x multiplier
在iPad Mini系列中，iPad Mini一代为1x multiplier(163PPI)，其他为2x multiplier

4. Android处理PPI

Android系统定义的四种像素密度

像素密度	ldpi	mdpi	hdpi	xhdpi
ppi	120	160	240	320
dpr	0.75	1.0	1.5	2.0

可以看出Android中mdpi与iOS中的1x multiplier所代表的PPI是一样的，xhdpi与iOS的2x multiplier所代表的PPI一样，如下图

这里写图片描述

设备像素比DPR(device pixel ratio)：

1. 概念:

全称设备像素比(Device Pixel Ratio）。先给出其官方定义：

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。

由上述公式计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比–dpr

2. 安卓手机像素比如下：

由上图可知，ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

想要了解主流移动设备的设备像素比(device pixel ratio)可以参考以下两个网站：
http://screensiz.es/
http://www.devicepixelratio.com/

3. 关于设计师和前端工程师之间如何协同：

一般由设计师按照设备像素(device pixel)为单位制作设计稿。
前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码

总结：

在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子最中使用 2*2 个物理象时表示
在高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用4*4个物理像素表示
整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍
如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）
css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与

DPR与PPI的关系

综合上述安卓和苹果的密度分界图，可以得到的DPR与PPI的关系如下：

DPR = PPI/160

缩放

现代浏览器中实现缩放的方式都是「拉伸」像素(即每CSS像素单位代表的长度发生变化，而像素总数字不变)。(如果将一个元素为128px的元素放大一倍, 译者注)元素的宽度并没有从128px变到256px，事实上只是“实际像素”变为2倍大小(即256px)，而形式上这个元素的宽度还是128px，尽管它已经占据了256个设备像素的空间。

所以，我们可以得到如下结论：

缩放会引起CSS像素的变化——即引起每1个CSS像素所代表的物理像素变化。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

所以，有上述描述，我们可以得到如下结论：

页面缩放比例 = 物理像素/CSS像素

注意：

物理像素是不能改变大小的
缩放其实就是改变1css 像素等于多少个物理像素，换言之，就是1个css像素需要用多少个物理像素表示

1. 放大

分析：上面是放大2倍时的效果

原来，1个css像素=1个物理像素
放大2倍，就是让1个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点
所以，放大2倍后，1个css像素=2x2个物理像素

2. 缩小

分析：上面是缩小到1/2的效果

原来1个css像素=1个物理像素
缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以我们看到右边屏幕上，缩小后，4个css像素才等于1个css像素
所以，缩小1/2后，2x2个css像素=1个物理像素

像素密度DPI

1. 概念

DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数量，我们将PPI、DPI都称为像素密度，但PPI应用更广泛，DPI在Android设备比较常见。

2. 计算方法：

如下图所示，利用勾股定理我们可以计算得出PPI
在这里插入图片描述
PPI值的越大说明单位尺寸里所能容纳的像素数量就越多，所能展现画面的品质也就越精细，反之就越粗糙。

Retina即视网膜屏幕，苹果注册的命名方式，意指具有较高PPI（大于320）的屏幕。

注意：屏幕尺寸固定时，当PPI 越大，像素的实际大小就会越小，当PPI越小，像素实际大小就越大。

设备独立像素(Device independent Pixel)

1. 概念：

设备独立像素可以简写为dips或者dp，英文全称是device-independent pixels。
它并不是真实的物理像素，而是一个虚拟像素单位，下面介绍一下为什么会有设备独立像素的产生。
拿非视网膜设备的iphone手机来说，屏幕横向的物理像素是320px，但是对于iphone4s的视网膜设备，它的横向物理像素是640px。
真实的物理像素改变了，如果我们按照真实的物理像素进行布局，势必会造成混乱，所以就产生了这么一个虚拟像素单位。
非视网膜设备的iphone手机横向虚拟像素是320px，视网膜设备的横向虚拟像素单位也是320px，这样就有利于进行前端布局了。
android官方定义dip等价于160dpi屏幕下的一个物理像素点。

举个例子，在240dpi（物理像素）的屏幕上, 1dp等于1.5物理像素。
它也称为逻辑像素，简称dip。
根据上述设备像素与CSS像素之间的关系、及DPR的官方定义，我们可以推断出：

CSS像素 =设备独立像素 = 逻辑像素

二倍图

1. 概念

对于一张50x50的图片在标清屏下打开，1css像素=1个物理像素

如果在 Retina 屏幕中打开，在单一方向上，1css像素=2个物理像素，这样会造成图片模糊

解决方案就是使用倍图提高图片质量，解决在高清设备中存在的模糊问题

2. 核心思路

比如希望在手机屏幕中显示一张100x100的图片
先制作一张200x200 的图片
通过css设置其逻辑尺寸为100x100
高清屏下手机浏览器会放大2倍显示，正好是200x200，正好是图片本身尺寸
注意：放大2倍，并不是图片的css尺寸放大2倍，而是使用2倍的物理像素点显示图片，会造成图片中的暗区等都爆露出来，造成模糊效果

还有3倍图，4倍图等

视口（viewport）

1. 概念：

视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

2.特点

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域
但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度

布局视口 layout viewport

1.原有

早期的网页都是为PC端设置的，PC端屏幕相较手机屏幕要宽，为了在手机上也能够显示这些为PC端专门设置的网页，出现了布局视口的概念

2.概念

移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。
如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。

3. layout viewport的宽度的获取方式

这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。
布局视口的宽度一般为980，也有 1024 的

但手机屏幕要小很多，以 iphone6 为例，屏幕宽度是375

那么就会出现下面的结果

视觉视口 visual viewport

1. 视觉视口的由来

然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做 *visual viewport*。visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获

2. 概念

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

理想视口ideal viewport

1. 理想视口出现的原有

现在我们已经有两个viewport了：layout viewport 和 visual viewport。

很明显，布局视口>视觉视口，所以会在视觉视口中出现横向滚动条

但，很明显，这种体验差爆了

但浏览器觉得还不够，因为没有浏览器会这么做，而是，将网页内容进行缩放，缩放到在视觉视口中可以完全显示，造成的结果就是文字以及图片等变小，用户体验也是差爆了,而且现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。

2.概念

理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定

3. 所谓的完美适配指的是：

首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；
第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。
当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport。

4. 注意点：

ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。
所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。
但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备ideal viewport的宽度都为多少，可以到http://viewportsizes.com去查看一下，里面收集了众多设备的理想宽度。

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

meta标签（理想视口的设定）

1. 原有：

为了达到理想视口的设定，所以我们需要设置 meta 标签进行设置

2. 目的

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

3.问题

1. 如果不设置meta viewport标签

如果不设置meta viewport标签，那么移动设备上浏览器默认的layout viewport宽度值为980px，1024px等这些，总之是大于屏幕宽度的（这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事）。
如果不设置meta viewport标签，一个PC的页面在移动设备上会进行缩放并完整显示出来

2.为什么要用2个相同功能的规则

兼容性问题，如图所示：

根据上图我们可得：
width=device-width在IPhone和IPad上存在兼容问题；
initial-scale=1.0在IE上存在兼容问题

所以，

要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病。所以手机端最终版的代码就是：

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

3.冲突问题

如果width 和 initial-scale=1同时出现，并且还出现了冲突呢

例如：

<meta name="viewport" content="width=400, initial-scale=1">

当遇到这种情况时，浏览器会取它们两个中较大的那个值。

例如，当width=400，ideal viewport的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）

3.为什么要设置content=“width=device-width”

例如以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <style>
        .box{
            width: 300px; 
            height: 300px;
            background-color: #000;         
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

注意将自动生成的下面代码删除

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

问题思考：

iphone6的屏幕宽度为375，盒子的宽度设定为300，但是从视觉效果上看，盒子的宽度还不到屏幕宽度的1/2，为什么会这样？

看一下当前布局视口的宽度是多少

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aVbOMvjO-1610007869629)(http://qiniu.yaoyao.info/image-20210106173521605.png)]

可见，当前是以 980 作为视口宽度的，那么当980缩小之整个屏幕后，盒子的宽度也会相应的缩小，所以看起来，盒子的宽度和想想的不一样

如何解决呢？

设置布局视口与iphone6的屏幕宽度一致，也是375，则页面内容就无需缩小

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

但是并不是所有的手机屏幕宽度都是375，所以 width 的值不能固定，而是由设备实际的宽度决定

改成下面这样

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

总结一下：

ppk把移动设备上的viewport分为***layout viewport*** 、 visual viewport 和 ideal viewport 三类
其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。
移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport，为了得到ideal viewport，我们就需要用到meta标签
meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放

缩放

前面谈到过缩放的问题

页面在首次加载时，可以设置缩放比

<meta name="viewport" content="initial-scale=1">

设置缩放比为1，这行代码的作用与下面同样

width=375

但是考虑到兼容性，仍然建议两个属性都要写

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

思考：将缩放比设置为2和0.5，观察效果，分析原因

用户缩放

上面是开发者设置的页面初始缩放比例，手机端浏览器默认是允许用户通过触摸动作进行页面缩放的

可以通过下面的属性控制

user-scalable=no

完整写法

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

也可以使用下面的两个属性替代上面的属性

aximum-scale=1,minimum=1

完整写法

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

当然为了兼容性，建议两种写法都写上

最终版

最标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

最后，完整版的 viewport 代码如下

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum=1,user-scalable=no"/>

box-sizing

https://developer.mozilla.org/zh-cn/docs/web/css/box-sizing

在移动端布局时经常用到 box-sizing 属性

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum=1,user-scalable=no"
    />
    <title>Document</title>
    <style>
      .box {
        display: block;
        width: 150px;
        height: 150px;
        background-color: #000;
        margin: 10px;
      }
      .box1{
        /* 默认值 */
        box-sizing: content-box;
        padding: 10px;
        border: 5px solid #ccc;
      }
      .box2{
        box-sizing: border-box;
        padding: 10px;
        border: 5px solid #ccc;
      }
    </style>
  </head>
  <body>
    <img src="/images/u=1949189906,87591702&fm=193&f=GIF.jfif" class="box" alt="冬至">
    <img src="/images/u=1949189906,87591702&fm=193&f=GIF.jfif" class="box box1" alt="冬至">
    <img src="/images/u=1949189906,87591702&fm=193&f=GIF.jfif" class="box box2" alt="冬至">
  </body>
</html>