前言

本文主要记录了移动Web开发的基本概念，包含分辨率、物理像素、CSS像素以及它们之间的关系，和viewport设置的相关用法。

移动Web开发

移动web开发是指针对手机、平板电脑等移动设备的web开发。

基本概念

分辨率

分辨率(resolution，又称解析度)指显示器所能显示的像素的多少，显示器可显示的像素越多，画面就越精细。

物理像素

物理像素也称设备像素是屏幕的最小物理单位；

物理像素并不一定是一个小正方形区块，也没有标准的宽高；

只是一个由由红、蓝、绿三原色组成的一个“点”而已；

图片来源于网络

“2532 x 1170 分辨率”指的就是物理像素，表示屏幕水平有1170个物理像素点，垂直有2532个物理像素点。

CSS像素

CSS像素又称为虚拟像素、设备独立像素或逻辑像素也就是web开发中使用的像素（px）。

物理像素和CSS像素的关系

物理像素是屏幕显示页面效果的最小单位；

CSS像素是web开发中使用的像素；

在不同分辨率的屏幕下，由多个物理像素对应一个CSS像素，实现在不同分辨率的屏幕下显示相同的页面效果。

设备像素比（dpr）

==设备像素比 = 物理像素 / CSS像素==

图片来源于网络 dpr = 2 意味着一个CSS像素需要用2*2个物理像素来绘制；

获取dpr

使用window.devicePixelRatio属性可获取dpr 在这里插入图片描述

注意

放大和缩小改变的是CSS像素；

PPI 、 DPI

ppi (pixels per inch)：图像的采样率（在图像中，每英寸所包含的像素数目）；

dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）；

都表示屏幕每英寸所拥有的像素数量；

PPI计算公式：对角线像素个数 / 屏幕尺寸

在这里插入图片描述

视口（viewport）

viewport 是用户网页的可视区域。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport

使用meta 标签设置Viewport;

    <!-- name="viewport" 设置 viewport-->
    <!-- width=device-width 告诉浏览器将视口宽度设置为设备宽度 -->
    <!-- initial-scale=1.0 初始缩放比例 -->
    <!-- content="width=device-width, initial-scale=1.0" 兼容写法 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

除了上述的设置，content还可以设置maximum-scale、minimum-scale、user-scalable。

maximum-scale：(0.5) 允许用户缩放到的最大比例；
minimum-scale：(5) 允许用户缩放到的最小比例；
user-scalable：(yes/on) 用户是否可以手动缩放；

注：user-scalable很多浏览器不支持设置user-scalable

获取视口宽度

通过document.documentElement.clientWidth 属性或 window.innerWidth属性可以获取当前视口宽度，为了保证兼容性将两种方法都写document.documentElement.clientWidth || window.innerWidth。在这里插入图片描述

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！