07-移动端开发教程-移动端视口

2022-05-23 20:08:28

老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。

1. 关于屏幕

1.1 屏幕尺寸

设备屏幕尺寸是指屏幕的对角线长度。比如：iphone6/7是4.7寸，iphone6/7p是5.5寸。

1英寸 = 2.54厘米
3.5in = 3.5*2.54cm = 8.89cm
4.0in = 4.0*2.54cm = 10.16cm
4.8in = 4.8*2.54cm = 12.192cm
5.0in = 5.0*2.54cm = 12.7cm
5.5in = 5.5*2.54cm = 13.97cm
6.0in = 6.0*2.54cm = 15.24cm

手机尺寸

在这里可以查看大部分流行手机的屏幕尺寸：地址

1.2 屏幕分辨率

屏幕分辨率是指：屏幕的像素点数。

在PC端的分辨率常见是：[ 1366*768, 1440*900, 1024*768, 1400*900,...]
移动端常见分辨率: [2160*1080, 1920*1080, 1334*750, 1136*640...]

在说分辨率的时候我们常常会把大的值说在前面，所以在PC端屏幕宽度比高度的值要大一点，第一个值一般是指的宽度第二个值为高度。

移动端正好相反，手机一般宽度都是小于高度，所以第一个值是宽度。

当前流行的设备分辨率地址

补充几个概念
Full HD(全高清): 19201080分辨率，iphone7p就是这个。
4K屏: 也叫QHD或UHD(超高清)，最小分辨率是38402160，电视用的多
设备相机的像素：
640*480 = 307200 = 30万像素
1600*1200 = 1920000 = 200万像素
3264*2488 = 8120832 = 800万像素
4536*3024 = 13716864 = 1400万像素

1.3 设备的PPI/DPI

PPI（Pixels Per Inch）| DPI（Dots Per Inch），两个值是屏幕每英寸的像素数量，即像素密度（Screen density）。

一般的计算方法或者公式： DPI= 对角线分辨率 / 屏幕尺寸

屏幕对角线的分辨率也就是屏幕对角线上的像素点数，可以根据已知的横纵分辨率通过勾股定理计算得。

补充：三角形勾股定理

计算如下手机dpi：

手机dpi计算

勾股定理算出对角线的分辨率

对角线分辨率除以屏幕尺寸：2203/5≈440dpi

1.4 设备像素(device pixel)与逻辑像素(css像素)

1.4.1 设备像素(device pixel):

设备像素是物理概念，指的是设备中使用的物理像素,也就是屏幕中的发光的点数(屏幕由很多个发光点组成，每个发光点可以显示不同的颜色，这些发光的点组成了屏幕)。

比如iPhone 5的分辨率640 x 1136px。横向有640个发光的点，纵向有1136个发光的点。所以我们说iPhone5 的设备水平像素是640像素，指的是640个发光点。

1.4.2 CSS像素(css pixel):

CSS像素是Web编程的概念，CSS样式代码中使用的逻辑像素。1个逻辑像素可能对应多个物理像素（发光点）。

在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。

例如1：
假设老马电脑的物理分辨率是1024* 768。如果我故意设置操作系统分辨率为512*384（水平和垂直各缩小1倍），那么此时css定义的1px像素的盒子在屏幕中的显示的宽度比原来高分辨率的宽度增加一倍，所以CSS中的像素只是相对，不是绝对的。

例如2：
iPhone 5使用的是Retina视网膜屏幕，横向逻辑css的像素是320px，但是实际物理像素是640的点，所以水平方向就会有2个点对应css的1个像素，垂直也是两倍的关系，也就是1个css的逻辑像素：由水平2个物理像素点和垂直2个像素点也就是（2乘2=4）4个物理像素点显示1px宽1px高的一个逻辑的css像素。如果是css像素是：2px*2px呢？

左侧是正常的屏幕，右侧是视网膜屏

由于这个2倍的关系，我们也称iphone5为两倍屏,也就是dpr。

1.4.3 设备独立像素（DIP）

设备独立像素（DIP，device-independent pixel，density-independent pixel），简单地来说设备独立像素就是：独立于设备的用于逻辑上衡量像素的单位。在移动Web开发中就是指的CSS的逻辑像素。

1.5 设备像素比(devicePixelRatio)

设备像素比(dpr) 与 ppi有一定的相关性，即ppi越大，dpr也相应的较大，1dpr 对应160ppi ，其对照表如下：

	dpi	dpi	dpi	dpi
ppi	120	160	240	320
默认缩放比(dpr)	0.75	1.0	1.5	2.0

设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素（也称物理像素）和CSS像素的比值(设备独立像素)。

DPR = 设备像素 / CSS像素

仅仅计算横向或者纵向。比如：iphone5为例：水平物理像素640 页面缩放100%时，横向320px，则dpr = 640 / 320 = 2

DPR也有对应的javascript属性window.devicePixelRatio （ie11+,edge,chrome49+, Safari9.1+）

DPR不一定都是整数，尤其是android设备十分的碎片化！

2. 视口

问题：PC端设计的网页一般都是大于960px 尺寸，移动端上的浏览器为了能够将那些为PC端设计的网站正常显示，一般都给一个默认的整屏的宽度为980px（css像素），虽然能这样让移动端浏览器兼容大部分PC端页面，但是页面缩放后文字会变得非常小，用户需要手动放大缩小才能看清楚，体验非常差。

PC端页面在手机上显示效果

苹果首先在浏览器上引入了视口的功能，随后各大浏览器都跟随实现。

视口（viewport）是用户网页的可视区域，也可称之为视区。

2.1 PC端视口

PC端视口的大小跟浏览器的可视区的宽高保持1：1固定比例对应。也就是说浏览器改变宽高，视口跟着改变。

2.2 移动端视口

在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。

由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。

2.2.1 视图视口（visual viewport）

视图视口是手持设备物理屏幕的可视区域。

视觉视口是用户正在看到的网站的区域，对于的javascript属性是window.innerWidth/Height

2.2.2 布局视口（layout viewport）

布局视口：在移动端视口与移动端浏览器屏幕宽度不再相关联，可以单独设置它的宽高（主要是宽），这个视口就是HTML页面布局的区域，并且可以通过viewport meta标签控制。

布局视口不会受到缩放的影响，缩放不会导致页面重排渲染，对于移动端宝贵的性能来说非常重要。

layout viewport布局视口的宽度可以通过js的document.documentElement.clientWidth获取。

各个浏览器默认的布局视口宽度：

2.2.3 meta标签控制布局视口的宽度

meta标签设置布局视口的语法：
<meta name="viewport" content="name1=value1,name2=value2">

Name	Value	Description
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

width是设置布局视口的宽度。如果设置iphone5s具体的width值为：320。

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

如果只是设置viewport的width属性时，iphone的浏览器自动将页面进行缩放到恰好放下页面而不出现滚动条，所以此时：visual viewport == layourt viewport。

上例中：就像把屏幕分成320份。如果设置一个元素为100px*100px，看起来就是屏幕的100/320

如果布局视口的宽度=device-width(设备宽度，也就是:物理像素/dpr)时，此时页面100%的宽度正好能在视觉视口中完全显示，不需要缩放查看页面了,而且在不同尺寸下都能基本表现一致，此时的布局视口的状态我们就称为理想视口（ideal viewport）。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>理想视口</title>
  <style>
    html, body, div {
      padding: 0;
      margin: 0;
    }
    .box {
      width: 100%;
      height: 100px;
      background-color: #ccc;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
</body>
</html>

2.2.4 理想视口(ideal viewport)

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

理想视口的宽度一般可以通过以下公式计算：
理想视口的宽度 = 设备像素 / dpr

也就是当布局视口的宽度等于设备独立像素的宽度时就是理想视口。

简单的指定的方法：

<!--这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致-->
 <meta name="viewport" content="width=device-width">
或者
 <meta name="viewport" content="initial-scale=1">

2.2.4 meta标签控制布局视口的缩放

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

为什么我们指定了meta标签的viewport缩放比例1也可以实现理想视口呢？

这个比值到底是谁呢？这个值是确定整体网页缩放的比例。

缩放比 = 理想视口的宽度 / 视觉视口的宽度

也就是说当视觉视口的宽度和理想视口的宽度相等时，则就是1。因为手机端的浏览器会自动设置布局视口的宽度为视觉视口的宽度，所以此时：设备的布局视口==视觉视口==理想视口。

看一图就明了：

普通屏幕	两倍屏

视觉视口：当页面手动放大的时候，用户可以看到的网页内容减少，视觉视口的尺寸变小。反之，同理不赘述。

默认的缩放（initial-scale）值设置后，浏览器会根据理想视口计算出视觉视口，并设置布局视口==视觉视口。

但是如果width和initial-scale都设置的时候，浏览器会取两个值较大的，所以可以通过width设置一个最小的布局视口宽度。

2.3 viewport的其他设置

maximum-scale
在移动端，你可能会考虑用户浏览不便，然后给予用户放大页面的权利，但同时又希望是在一定范围内的放大，这时就可以使用maximum-scale来进行约束。
maximum-scale用于指定用户能够放大的比例。

举个例子来讲：
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />
假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的5倍。

minimum-scale
类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。

通常情况下，为了有更好地体验，不会定义该属性的值比1更小，因为那样页面将变得难以阅读。

user-scalable
如果你不想页面被放大或者缩小，通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

该属性的默认值为yes，即可被缩放（如果使用默认值，该属性可以不定义）；当然，如果你的应用不打算让用户拥有缩放权限，可以将该值设置为no。

使用方法如下：
<meta name="viewport" content="user-scalable=no" />

下一节预告：

移动端的适配方案

联系老马

对应视频地址：https://qtxh.ke.qq.com/
老马qq： 515154084
老马微信：请扫码

感谢您对老马的支持

码农公寓