《移动 Web 手册》 笔记

像素

  1. 设备像素。设备屏幕的物理像素，任何设备的无力像素的数量都是固定的。
  2. CSS像素。为 Web 开发者创造的，在 CSS、JavaScript 中使用的一个抽象的层。

初始包含块

CSS 中没有任何宽度声明时，块级元素的默认宽度都为 100% （根据父元素的宽度来计算）。

这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致。

分辨率

  • DPR: 设备像素比
  • dppx: window.devicePixelRatio、device-pixel-ratio 的单位，即每个点对应的像素数。
  • dpi: IE11 和以下的版本不支持 dppx。因此需要以 dpi 单位来代替。因为英寸对应了 CSS 中的 96 个像素，所以 1dppx = 96dpi
1
2
3
4
5
6
7
8
9
10
11
if(window.devicePixelRatio >= 2) {
    // DPR 大于等于 2 时执行
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    // DPR 大于等于 2 时执行
}

@media all and ((-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)) {
    // 为了使媒体查询支持所有浏览器
}

meta视口

meta 视口标签存在的主要目的是让布局视口的尺寸和理想视口的尺寸匹配。它是由 Apple 发明的，其他手机和平板复制了它的大部分内容；桌面浏览器不支持它，也不需要，因为他们没有理想视口的概念。

书写格式:

1
<meta name="viewport" content="name=value,name=value">
  • width: 设置布局视口的宽度
  • init-scale: 设置页面的初始缩放程度和布局视口的宽度
  • minimum-scale: 设置最小缩放程度
  • maximum-scale: 设置最大缩放程度
  • user-scalable: 是否组织用户进行缩放

完美视口

1
<meta name="viewport" content="width=device-width,initial-scale=1">

IE10 有着完全相反的问题: initial-scale 为 1 时，它在横屏模式下宽度也保持着 320px，但是 width=divice-width 时它会从 320px 变为 480px。

于是，width=device-width、initial-scale=1 两个同时使用，可以兼容大部分浏览器。