H5 ​

基本概念 ​

屏幕尺寸: 对角线的长度 (厘米)

屏幕分辨率: 横纵向上物理像素的个数 (物理像素)

屏幕密度: 每英寸上物理像素的个数

视口尺寸: 代表的横纵向上css像素的个数 (css像素)

像素比: 物理像素/设备独立像素 一个方向上占据的物理像素/一个方向上占据的css像素的个数

四个像素 ​

1. 物理像素:

分辨率,是屏幕呈像的最小单位, 一个物理像素占据的实际屏幕尺寸在不同设备上是不一样的;

设备出厂时,该款设备所包含的物理像素点数和一个物理像素所占据的实际屏幕尺寸是不会变的

2. css像素:

是web开发者使用的最小单位

一个css像素最终一定会转成物理像素去屏幕上呈像

一个css像素到底占据多少个物理像素和屏幕的特性与用户的缩放行为有关

• 不考虑用户缩放

  没有viewport:

  这块屏幕横向上占据了多少个物理像素 (横向分辨率)

  这块屏幕横向上占据了多少个css像素 (视觉视口的横向尺寸)

  有viewport:

  像素比

  一个方向上占据的物理像素/一个方向上占据的css像素的个数

• 考虑用户缩放

  在屏幕的特性的基础上:

  放大: css像素占据更多的物理像素

  缩小: css像素占据更少的物理像素

3. 设备独立像素

是设备对接css像素的接口, 一旦css像素与独立像素挂钩 (width=device-width)

此时像素比才能发挥真正的作用

4. 位图像素

图片的最小单位

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

三个视口 ​

1. 布局视口

   决定页面的布局

2. 视觉视口

   决定用户看到什么

   一个css像素到底占据多少个物理像素和视觉视口有极大的关系

   一个视觉视口包含的物理像素的个数是确定的 (分辨率)

   一个视觉视口包含的css像素的个数是不确定的 (用户的缩放行为有关)

   一个视觉视口的实际尺寸是确定的 (屏幕尺寸)

3. 理想视口

   设备独立像素所代表的值

var layout = document.documentElement.clientWidth; //布局视口的宽度, 没有兼容性问题

var visual = window.innerWidth; //视觉视口, 接近全部支持

var dream = screen.width; //一半代表理想视口的宽度, 一半代表设备分辨率!!有很大的兼容性问题

两个动作 ​

放大: 一个css像素的面积变大,视觉视口内css像素的个数变少,视觉视口的尺寸变小,布局视口不变

缩小: 一个css像素的面积变小,视觉视口内css像素的个数变多,视觉视口的尺寸变大,布局视口不变

系统缩放参照于理想视口进行缩放, 改变的是布局视口和视觉视口

三个意外 ​

1. 太大的元素

使用完美视口解决太大元素超过视觉视口后不出现滚动条的问题

完美视口:

2. width=device-width与initial-scale的冲突:

​ initial-scale=1.0时布局视口为375px,

​ initial-scale=0.5时布局视口为750px,

​ initial-scale=2.0时布局视口为187.5px (width=device-width存在默认布局视口为375)

​ 结论: 谁的布局视口大则决定使用谁!

3. 等比问题

   没有viewport:

   等比,页面展示太小,用户体验不好

   有viewport:

   不等比

   每一个css像素在不同设备占据的实际屏幕尺寸一样

   每一个css像素在不同设备占据的物理像素个数不一样 (像素比)

   一个物理像素占据的实际屏幕尺寸在不同设备上是不一样的

适配 ​

em: 自身的font-size

rem: 根标签html的fontsize (改变了一个元素在不同设备上占据的css像素的个数)

viewport: 将所有设备布局视口的宽度调整为设计图的宽度

• 原理: 每一个元素在不同设备上占据的css像素的个数是一样的,但是css像素和物理像素的比例是不一样的,等比的
• 适配的优点: 所量即所得
• 适配的缺点: 没有使用完美视口

//1
var targetW = 640
var scale = screen.width/targetW
var meta = document.createElement("meta")
meta.name = "viewport"
meta.content = "initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" +
    scale + ",user-scalable=no";
document.head.appendChild(meta);

//2
(function(){
    var targetW = 640;
    var scale = document.documentElement.clientWidth/targetW;
    var meta = document.querySelectir("meta[name='viewport']");
    meta.content = "initial-scale=" + scale + ",minimum-scale=" + scale + 
        ",maximum-scale=" + scale + ",user-scalable=no";
})()