移动端基础---移动Web开发入门Part1

1-1 物理像素

1. 像素
   
   需要注意的是，这个6.1英寸是指的对角线

2. 分辨率

   举个例子：iphone13的分辨率是2532×1170像素，这是什么意思？

   指的是手机横向有1170个点，纵向2532个点，看下面
   
   这个手机的分辨率就是4*2，由八个点描述屏幕的显示信息和2532×1170个点描述的显示信息，哪一个更清晰？不用想都知道是后者^ ^这里提到分辨率是一个一个的点，那这个点是什么呢，就引出下面的内容

3. 物理像素

   物理像素(physical pixel)也可以叫做设备像素(dp : device pixel)
   

   上面这张图，左边的点就是物理像素点，由红绿蓝三原色组成，通过控制三原色的明亮程度，就能控制显示的图形图案

   在实际开发中，是以物理像素为准的吗？看下面的例子
   

   同一个物理像素点，在两部手机里显示出的大小是不一样的，那假如相同屏幕尺寸下，分辨力更高的手机，一个物理像素点就很小很小，而在分辨率低的手机上就很大，所以实际开发中是不能以物理像素为准的

   物理像素只是我们了解设备分辨率所需要知道的知识，在实际开发中是用什么呢？

4. CSS像素

   还可以叫逻辑像素(logical pixel)，设备独立像素(dip: device independent pixel)

   我们实际开发中使用的像素就是CSS像素，比如width: 200px，看下面这张图：
   

   左边是标清屏，右边是高清屏，我们可以发现，在标清屏下，1个css像素是用一个物理像素点展示的，而右边高清屏，1个css像素是用4个物理像素点表示的，我们可以发现不论是高清屏还是标清屏，css像素代表的大小是不变的，只是用来显示css像素的物理像素点变多了，也就是显示得更精细了，如下图展示
   

   浏览器会自动帮我们把css像素转换成物理像素，不需要我们自己费心^ ^

5. 设备像素比

   设备像素比(dpr: device pixel ratio)

   dpr = 设备像素 / CSS像素(缩放比是1的情况下)，横向或者纵向，但是一定是一个方向的

   举个例子：
   

   左边，横向上，一个css像素对应1个物理像素，所以dpr为1；右边，一个css响度对应2个物理像素，dpr为2

   所以，dpr = 2 表示 1个css像素用2×2个设备像素来绘制，不要搞错了dpr是2！！不是4

   那什么是标清屏什么是高清屏？

   dpr= 1是标清屏，dpr大于1，比如2、3、4等都可以认为是高清屏

6. 缩放

   缩放改变的是css像素的大小，看下面例子：
   

   一定要记住放大的是CSS像素！！！，然后再看看缩小：
   

   可以发现的是，不论放大还是缩小，屏幕上的物理像素点是不会变化的！！

7. PPI

   上面的这张图
   

   中有提到PPI，PPI是什么呢？

   每英寸的物理像素点，ppi(pixels per inch)也可以叫 dpi(dots per inch)

   这个ppi可以理解为像素密度，每英寸的像素点越多，像素密度越大，那么展示的内容也就越精细，可以浅看一个计算公式：
   

1-2 视口–viewport

当我们用手机打开一个web端页面的时候，有的网页会显示完整的缩放页面，有的是看不完整的，我们看一张图：

这张图演示的就是看不完整的情况，可以看到980px是视口宽度，而我们的手机屏幕宽度只有375px，所以页面显示不完整，这个就不具体讲了，直接贴上meta标签里设置的内容：

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

浅讲一下里面的内容：

width=device-width，视口宽度等于设备宽度

initial-scale=1，缩放比为1，这个跟上面的width=device-width效果是一样的，两个都写算是兼容浏览器吧

user-scalabel=no，用户不可以缩放，下面的maximum-scale,ninimum-scale都为1，也是不让用户缩放，这三个属性，在有的浏览器是不会生效的，比如safari，有的浏览器认为不让用户缩放“罪大恶极”，所以这三个是不会生效的，但还是写上。

然后就是介绍几个获取设备宽度的方法

var viewWidth = window.innerWidth || document.documentElement.clientWidth
// 常用是上面这两个，这样写就可以
document.documentElement.getBoundingClientRect().width 	//也可以获取