移动端视口和像素比基础问题整理

1.基本概念

• 屏幕尺寸：对角线的长度 （厘米）
• 屏幕分辨率：横纵向上物理像素的个数(物理像素)
• 屏幕密度：每英寸上物理像素的个数
• 视口尺寸：代表的横纵向上css像素的个数（css像素）

2. 4个像素 3个视口 2个操作 1个比例
4个像素：

• 物理像素

  分辨率是屏幕呈像的最小单位。
     一个物理像素占据的实际屏幕尺寸在不同设备上是不一样的
     设备出厂时,该款设备所包含的物理像素的点数和一个物理像素所占据的实际屏幕尺寸是不会变的

• css像素

  是web开发者使用的最小单位
     一个css像素最终一定会转成物理像素去屏幕上呈像
     一个css像素到底占据多少个物理像素和谁有关？
     屏幕的特性   
        用户的缩放行为
        不考虑用户缩放
         1.没有viewport：
             这块屏幕横向上占据了多少个物理像素（横向分辨率）
             这块屏幕横向上占据了多少个css像素  （视觉视口的横向尺寸）
         2.有viewport：
             像素比 == 一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个
         考虑用户缩放
             在屏幕的特性的基础上：
             放大：css像素占据更多的物理像素
             缩小：css像素占据更少的物理像素

• 设备独立像素

  是设备对接css像素的接口，一旦css像素与独立像素挂上勾（width=device-width）
     此时像素比才能发挥真正的作用

• 位图像素

  图片的最小单位
     位图像素与物理像素一比一时，图片才能完美清晰的展示

3个视口

• 布局视口

  决定页面的布局
     layout viewport:
         手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度
         布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。
         可以通过document.documentElement.clientWidth来获取 
         在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，因为我们横
   向的布局都是
         按初始包含块开始填的，在移动端一样，不过我们这个时候应该叫它布局视口。
   。

• 视觉视口

  visual viewport:
         视觉视口语设备屏幕一样宽，并且它的css像素的数量会随用户的缩放而改变
         visual viewport的宽度可以通过window.innerWidth 来获取，
         但在Android 2, Oprea mini 和 UC 8中无法正确获取
    
     决定用户能看到什么
         一个css像素到底占据多少个物理像素和视觉视口有极大的关系
         一个视觉视口的实际尺寸是确定的（屏幕尺寸）
         一个视觉视口包含的物理像素的个数是确定的（分辨率）
         一个视觉视口包含的css像素的个数是不确定的（用户的缩放行为有关）

• 理想视口

  设备独立像素所代表的值
    我们分析知道：布局视口的默认宽度并不是一个理想的宽度，对于我们移动设备来说，最理想的情况是
    用户刚进入页面时不再需要缩放。这就是为什么苹果和其他效仿苹果的浏览器厂商会引进理想视口！
    只有是专门为移动设备开发的网站，他才有理想视口这一说。而且只有当你在页面中加入viewport的meta
    标签，
    理想视口才会生效。
    <meta name="viewport" content="width=device-width" />
    这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致

2个操作

用户
    只影响布局视口
    系统（initial-scale）
        影响布局视口和视觉视口
        放大：放大一个css像素的面积,视觉视口的尺寸变小，一个css像素包含的物理像素的个数变多
        缩小：缩小一个css像素的面积,视觉视口的尺寸变大，一个css像素包含的物理像素的个数变少
    
像素比
    官方定义：物理像素/设备独立像素
            一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个数
    像素比: 一个方向上占据一块屏幕所需要的物理像素的个数 /一个方向上占据一块屏幕所需要的设备独立像素的个数  =2;

3.3个意外

• 太大的元素

  使用完美视口(有width=device-width和initial-scale=1.0)解决太大的元素超过视觉视口后不出滚动条的问题

• width和initial-scale的冲突

  谁大听谁的

• 等比问题

  没有viewport：
         等比,页面展示太小，用户体验不好
     有viewport：
         不等比，每一个css像素在不同设备占据的实际屏幕尺寸一样。
                 每一个css像素在不同设备占据的物理像素的个数不一样（像素比）。
                 一个物理像素占据的实际屏幕尺寸在不同设备上是不一样的

获取三个视口的值

• 布局视口：document.documentElement.clientWidth(基本没有兼容性问题)
• 视觉视口：window.innerWidth（有一点兼容性问题）
• 理想视口：screen.width（兼容性问题极大）

完美视口以及meta标签

过大的元素--->完美视口

• <meta name="viewport" content="width=device-width,initial-scale=1.0" />