移动端基本概念

移动设备/屏幕

屏幕尺寸

屏幕尺寸指的是屏幕对角线的长度，单位是英寸，1英寸 = 2.54厘米。

屏幕分辨率

屏幕分辨率指的是屏幕横纵向上物理像素点的个数，一般以横向像素*纵向像素来 表示一个手机的分辨率.

屏幕像素密度

也叫:像素密度或屏幕密度
屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关.

普通屏vs高清屏

一种具备超高像素密度的液晶屏
高清屏和普通屏相比，相同区域的物理像素点数,高清屏是普通屏的4倍

物理像素 / 设备独立像素 / css像素

物理像素(设备呈像的最小单元 pt )：屏幕的分辨率
任何设备的物理像素的数量都是固定的 ，任何一款设备上1物理像素的大小是不会变的. 不同设备上1物理像素的大小可能是不一样的

像素比 = 一个方向上占满一块屏幕需要的 物理像素（分辨率） 的个数 / 一个方向上占满一块屏幕需要的 设备独立像素 的个数

css像素 px ：浏览器中的最小单位
css 像素的大小是会变的，无论两个css 像素大小怎么样，如果数量一样，那就是相同的

以 IPhone6 为例：
     物理像素：750 × 1334
     设备独立像素： 375 × 667
     像素比：2
     布局视口：980（980个css像素）

一般布局视口最大是980px，当布局视口 = 设备独立像素 时，这个布局视口被称为 理想视口

• 100px 在移动端为什么比在PC端看起来要短？
  在PC端，物理像素 ： css 像素 = 1 ：1
  在移动端，物理像素 ： css 像素 = 980 ：750
  css 像素 相对 物理像素 来说 变小了

• 如何使100px 在移动端 和 在PC端看起来 一样？
  <meta name="viewport" content="width=device-width, initial-scale=1">
width ：css像素(布局视口)
  device-width：设备独立像素（视觉视口）
  物理像素 / 设备独立像素 = 2
  若：css像素 = 设备独立像素
  那么：物理像素 / css像素 = 2

让 物理像素 / css像素 的值 是 像素比，此时就一样大了

用户缩放

用户缩放时，改变的是css像素的面积，但是css像素的数量是不变的，所以布局视口不变；但是视觉视口中包含的css像素的个数变了（如果是放大，包含的css像素的个数变少），物理像素在同一设备中是永远不变的。

系统缩放

initial-scale
按照理想视口进行缩放，改变布局视口和视觉视口的大小

width和initial-scale之间的冲突

谁大听谁的