移动端基础概念

基础概念

屏幕尺寸

• 指屏幕的对角线的长度，单位是英寸，1英寸 = 2.54厘米
• 常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等

屏幕分辨率

• 在横纵向上的像素点的个数，单位是px，1px = 1个像素点。
• 一般以 纵向像素 * 横向像素 来表示一个手机的分辨率，比如 1960*1080(这里的1像素指的是物理设备的1个像素点)

高清屏

• 高清屏(Retina：又称视网膜屏)与普通屏相比，相同区域的物理像素点数是普通屏的4倍(DPR=2)
• 具备足够高的物理像素密度而使人肉眼无法分辨其中单独像素点的液晶屏
• 是一种具备超高像素密度的液晶屏
• 同样大小屏幕上显示的像素点由一个变为多个

物理像素

• 又称为设备像素，它是屏幕能显示的最小粒度
• 买手机的时候会有一个 n x m 的分辨率， 那是屏幕的 n x m 个呈像的点，一个点（小方格）为一个物理像素
• 设备像素也被称为物理像素，它是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和高度
• 任何设备的物理像素都是固定的，任何一款设备上1物理像素的大小是不会变得
• 不同设备上1物理像素的大小可能是不一样的

CSS像素

• CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量Web页面上的内容
• 它是为Web开发者创造的，在css或者javascript中使用的一个抽象的层
• 一般情况下，css像素被称为与设备无关的像素(device-independent像素)，简称"DIPs"
• 在一个标准的显示密度下，一个css像素对应着一个设备像素

像素中的最小单位

• 物理像素是设备呈像的最小单位
• css像素是浏览器中的最小单位（即web开发中的最小单位）
• 位图像素是图像的最小单位

物理像素与CSS像素的关系

• 一个width为200px的元素，它占据了200个css像素，但200个css像素占据多少个物理像素取决于屏幕的特性（是否是高密度，即像素比）和用户的缩放行为
  • 在苹果的视网膜屏幕上，视网膜的像素密度是普通屏幕的两倍，这个元素就跨越了400个设备像素
    
  • 如果用户进行放大操作，视觉窗口变小，它将跨越更多的设备像素
• 需要注意的是，css像素与物理像素的关系是靠浏览器厂商在维护，并不是设备厂商
  
• css像素是浏览器中特有的概念

屏幕像素密度

• 又称像素密度或屏幕密度
• 屏幕上每英寸可以显式的像素点的数量，单位是ppi(pixels per inch)
• 屏幕像素密度与屏幕尺寸和屏幕分辨率有关

设备独立像素

• 设备独立像素，又称密度物管像素，可以理解为是计算机坐标系统中的一个点
• 这个点代表一个可以由程序使用的虚拟像素（比如：css像素），然后由相关系统转换为物理像素
• 它是css像素转换物理像素过程中很重要的一个环节
• 设备独立像素可以看成是设备提供的接口，用于对接应用的一些概念（如浏览器中的css像素）
• 只有当浏览器厂商对接上设备的独立像素时，浏览器厂商设计的移动端规则才能起作用，否则将采取默认的规则

位图像素

• 1个位图像素是栅格图像（如：png,jpg,gif等）最小的数据单元
• 只有当1个位图像素对应1个物理像素时，图片才能得到完美清晰的展示

像素比(DPR)

• 像素比指物理像素和设备独立像素的比例(即：devicePixelRatio = 物理像素 / 设备独立像素)
• 像素比 = 一个方向上占满一块屏幕需要的物理像素的个数/一个方向上占满一块屏幕需要的设备独立像素的个数
• 注意，像素比是比较个数而不是比较面积
• 添加 <meta> 标签 width=device-width ，可以将css像素与独立像素链接，此时可以把设备独立像素看成物理像素（即：物理像素 = 设备独立像素）
• 像素比可以通过  window.devicePixelRatio 来获取

移动端视口

移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。

布局视口（layout viewport）

• 布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取。
• 布局视口使视口与移动端浏览器屏幕宽度完全独立。CSS 布局将会根据它来进行计算，并被它约束
• 布局视口用于解决早期的pc端页面在手机上显示的问题。
• iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小

视觉视口（visual viewport）

• 视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。
•  当前缩放值 = 理想视口宽度 / 视觉视口宽度 ：用户放大时，视觉视口将会变小，CSS 像素将跨越更多的物理像素。
• 视觉视口决定了物理像素和css像素之间的比例

理想视口

• 只有当我们在页面中加入viewport的meta标签时，理想视口才会生效 <meta name="viewport" content="width=device-width"> (这句代码的意思是：布局视口宽度 = 理想视口宽度)
• 理想视口包含的css像素的个数等于独立设备像素的值
• 理想视口由浏览器厂商定义，因此同一设备上的不同浏览器拥有不同的理想视口
• 浏览器理想视口的大小也取决于设备,同一款浏览器在不同设备上拥有不同的理想视口

完美视口

• 当我们在页面中加入viewport的 <meta name="viewport" content="width=device-width;initial-scale=1.0"> 标签时,完美视口才会生效
•  width=device-width 和 initial-scale=1.0 这两个条件只要缺一条就不是完美视口，而是理想视口
• 完美视口不仅仅只能解决旋转时的问题，当页面中存在太大的元素时，假如使用理想视口，某些浏览器会扩展布局是口的宽度来容纳这个元素。此时，使用完美视口可以规避这个问题
• 推荐写法：

  <meta name="viewport" content="width=device-width,initial-scale=1.0,minmum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

布局视口与理想视口的关系

• 布局视口只规定出现在视口元素中的排列规则，它仅仅是移动端浏览器的一个属性。在物理像素和css像素1:1的情况下，可以认为布局视口比设备宽度（分辨率）要大很多
• 视觉视口决定了用户能看到什么
  • 从css像素角度出发，由于视觉视口所包含的css像素的个数跟用户的缩放行为有关，我们无法准确的判断视觉视口的尺寸。
  • 默认情况下（物理像素：css像素 = 1:1），一个视觉视口包含该设备分辨率的值所代表的css像素个数
  • 视觉视口包含了整个布局视口
• 移动端在初始化时，视觉视口会将整个布局视口完整显示出来，所以移动端浏览器在初始化的时候，物理像素与css像素之间的比例不可能是一比一，这个比例与设备分辨率和布局是口的大小有关
  
  • 这个比例的本质上和视口有关，因为移动端浏览器初始化时视觉视口包含的css像素个数等于布局视口包含的css像素个数
  • 视觉视口包含的物理像素个数等于设备的分辨率

获取三个视口的宽度（移动端）

• 布局视口
  •  var layout = document.documentElement.clientWidth 
    
  • 无兼容性问题
• 视觉视口
  
  •  var visual = window.innerWidth 
    
  • 接近全部支持
• 理想视口
  
  •  var dream = screen.width 
    
  • 一些设备代表理想视口宽度，一些设备代表设备的分辨率，有极大的兼容性问题

缩放

用户缩放

• 放大：一个css像素的面积变大，区域内css像素的个数变少，视觉视口的尺寸变小
• 缩小：一个css像素的面积变小，区域内css像素的个数变多，视觉视口的尺寸变大
• 在pc端用户缩放影响视口的尺寸
• 在移动端用户缩放影响视觉视口的尺寸

系统缩放

• 可以通过<meta>设置系统缩放

meta&viewport

• 此标签桌面浏览器不支持
• 推荐写法： <meta name="viewport" content="width=device-width,initial-scale=1.0,minmum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
  • width [pixel_value|device-width] 
    • 用于控制布局视口的大小， width=device-width 会使布局视口的大小编程理想视口的大小(即独立设备像素代表的大小)
      
    • 浏览器支持width的最大值为10000个像素，最小值为理想视口的20%
    • 设置具体数值大兼容性不佳，大部分的安卓手机不支持，仅有ios支持
    • 安卓的webkit不允许小于布局视口的宽度，如果指定了一个小于布局视口的值，它会默认转为布局视口的大小(通常为980)
    • ie10不允许超出480px的值，超出自动设置为布局视口的默认宽度1020px
    • 95%的浏览器都支持 width=device-width 
  • initial-scale
    
    • 初始缩放比例
      
    • 当用户旋转设备时，布局视口的宽度通常会发生改变，因为横竖屏时的理想视口尺寸不一样，但ios的Safari的视口不会做出改变（基于性能的考虑）
    • ios的Safari在 inital-scale 设置的情况下，用户旋转设备，其布局视口会发生改变。但只设置 inital-scale ，ie10在旋转时会有问题，因此需要采用完美视口的写法
  • user-scalable [no|yes] ：是否允许缩放，默认允许（ios10不支持该属性）
    
  • minimum-scale：允许缩放的最小比例
  • maximum-scale：允许缩放的最大比例
    • 没有通过meta标签设置 minimum-scale 和 maximum-scale 属性时，缩放比例为20%-500%
      
    • 有通过meta标签设置 minimum-scale 和 maximum-scale 属性时，缩放比例为10%-1000%
    • 安卓webkit不支持 minimum-scale 属性，其默认范围为25%-400%
    • ie minimum-scale 和 maximum-scale 属性都不支持
  • target-densitydpi
    
    • dpi_value 70-400：每英寸像素点的个数
      
    • device-dpi：设置默认像素密度
    • high-dpi：高像素密度
    • medium-dpi：中等像素密度
    • low-dpi：低像素密度