Web—11-手机端页面适配

swjblog 2021-12-29 原文

流式布局：

就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，成为流式布局

视觉窗口：

viewport是移动端持有。这是一个虚拟的区域，承载网页的。

承载关系:浏览器—-》viewport—-》网页

适配要求：

1.网页宽度必须和浏览器保持一致
2.默认显示的缩放比例和PC端保持（缩放比例1.0）
3.不允许用户自行缩放网页

满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。

适配设置：

如果任何设置都没有，默认走的就是viewpoint的默认设置
去设置新的viewport设置，达到适配的要求。
<meta name=\'viewport\'>设置视口的标签，在head里面并且应该紧接着编码设置。
viewport的功能：
    1，width：可以设置宽度（device-width：当前设备的宽度）
    2，height：可以设置高度
    3，initial-scale：可以设置默认的缩放比例
    4，user-scalable：可以设置是否允许用户自行缩放
    5，maximum-scale：可以设置最大缩放比例
    6，minimum-scale：可以设置最小缩放比例
    在<meta name=\'viewport\' content=\'\'> content=\'\'使用以上参数
    1. width=device-width   宽度一致比例是1.0
    2. initial-scale=1.0    宽度一致比例是1.0
    3. user-scalable=no     不允许用户自行缩放  （yes，no  1,0）
    标准适配方案：
            <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
            meta:vp + tab  快捷方式