移动端开发基础知识

Posted 2021-02-19 zerodoctor

1.物理像素
像素即一个小方块，它具有特定的位置和颜色，像素可以作为图片或电子屏幕的最小组成单位，这是一个相对长度单位，因为固定长度的屏幕可以有1000像素，也可以有5000像素

2.分辨率
屏幕分辨率指一个屏幕具体由多少个像素点组成。
Phone XSMax和 iPhone SE的分辨率分别为 2688x1242和 1136x640。这表示手机分别在垂直和水平上所具有的像素点数。
分辨率调节：假设我们的pc最高分辨率是1920x1080，我们可以手动调节位1680X1050，其实是将剩余的像素点给模拟值，而非真实值，这些点就显得很模糊

3.PPI
没英寸包括的像素数

4.DPI
即每英寸包括的点数

5.设备独立像素
同样尺寸的设备，分辨率可能不一样，比如a设备1000像素，b设备2000像素，这就导致了同样的元素在这两个设备上看起来不一样大
于是引出设备独立像素，我们用设备独立像素来表示元素的大小，在不同的设备上，它代表不同的物理元素大小，比如a100 b100,b中的100表示200 物理像素，都占十分之一，看起来一样大

6.设备像素比 dpr
设备像素比就表示不同设备上，物理像素和设备独立像素的比例
比如dpr 为2，表示该设备上，两个设备独立像素表示一个物理像素

7.视口
通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。拖拽会改变视口的大小

8.布局视口
在 PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括 borders、 margins、滚动条）。
在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大
document.documentElement.clientWidth/clientHeight来获取布局视口大小。

9.理想视口
设备屏幕区域，单位是设备独立像素，网站页面在移动端展示的理想大小
screen.width/height来获取理想视口大小。

10.Meta viewport
可以借助 元素的 viewport来帮助我们设置视口、缩放等，从而让移动端得到更好的展示效果。