乐趣区

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

jiezi

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″ />
退出移动版