web app基础知识（二）

Viewport

---

手机浏览器默认为我们做了两件事情

一. 页面渲染在一个980px（ios）的viewport
二. 缩放

---

viewport分为2个

1. visual viewport（度量/视口viewport)
   外部
   主要功能：缩放，手机屏幕使用时对页面的缩放
2. layout viewport(布局viewport)
   内部
   主要功能：对页面的重新排版（渲染）

---

设计移动Web

不要使用默认的980px的布局viewport

1. 宽度不可控制，不同系统不同设备的默认值都可能不同
2. 页面缩小版显示，交互不友好
3. 链接不可点
4. 有缩放，缩放后又有滚动

font-size为40px等于pc上12px同等物理太少，不规范
解决办法：
增加meta标签

---

Meta标签介绍

• width： 设置布局viewport的特定值（"device-width"）
• initial-scale:设置页面的初始缩放
• minimum-sacle:最少缩放
• maxmum-scale:最大缩放
• user-scalable:用户能否缩放

chrome console中

• document.body.clientWidth 默认的布局viewport
• window.innerWidth 默认的度量viewport
• document.body.clientHeight
• window.innerHeight