- 适配问题 : 屏幕尺寸不一样
- 解决方案 : 用百分比去自适应布局,非固定像素, 内容则向两侧填充 叫流式布局. 同时, 需要对移动端的viewport视口进行设置, 就到适配的目的了
- 视觉窗口 : viewport是移动端特有的, 看成一个虚拟的区域, 用来承载网页. 其关系: 浏览器承载着viewport, viewport承载的网页, 这个视觉窗口会帮我们缩小我们的网页
- 设置viewport, 已达到适配的要求 :
- ① 网页宽度必须和浏览器保持一致
- ② 默认显示的缩放比例和pc端保持一致
- ③ 不允许用户自动缩放
- 用viewport设置:
- 在meta标签设置viewport视口, 用content属性设置视口的功能
-
- 设置视口的宽度 = 等于当前设备的宽度 width=device-width
-
- 设置默认的缩放比例 initial-scale = 1.0
-
- 不允许用户自动缩放 user-scalable = no (yes/no, 1/0)
-
- 设置最大缩放比例 maximum-scale = 1.0
-
- 设置最小缩放比例 minimum-scale = 1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">