【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签设置网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 )

韩曙亮

发布于 2023-04-24 11:33:24

5.9K0

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、meta 视口标签简介

meta 视口标签就是为了移动端而设计的 , 该设置只有在移动端生效 ;

meta 视口标签用于设置浏览器按照理想视口显示页面 ;

使用 meta 视口标签来指定视口的大小和缩放比例，

例如：<meta name="viewport" content="width=device-width, initial-scale=1.0"> , 该标签的作用是告诉浏览器，

网页的宽度应该等于设备的宽度，并且初始缩放比例应该为1.0。

通过设置正确的 meta 标签，可以使网页在不同设备上具有相同的理想视口大小和布局。

二、meta 视口标签参数详解 - 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例

在如下的 meta 标签中 :

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

name 属性指定了视口的名称为 viewport ;
content 属性中的参数用于设置视口大小和缩放比例 ;
- width=device-width 样式设置网页宽度 = 设备宽度 , 即理想视口 ;
- user-scalable=no 样式设置用户是否可以手动缩放网页 ; 可设置 yes / no , 或者 1 / 0 ;
- initial-scale 样式设置网页初始缩放比例 , 该值大于 0 即可 ;
- minimum-scale 参数设置网页缩放的最小比例 , 该值大于 0 即可 ;
- maximum-scale 参数设置网页缩放的最大比例 , 该值大于 0 即可 ;

如果不设置 meta 视口标签 , 在移动端默认的网页宽度为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ;

推荐视口标签写法 : 所有的手机端网页都设置如下样式 ;

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

三、meta 视口标签代码示例

1、不设置 meta 视口标签代码示例

如果不设置 meta 视口标签 , 在移动端默认的网页宽度为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>meta 视口标签</title>
</head>

<body>
    meta 视口标签
</body>

</html>

显示效果 :

PC 端浏览器显示效果 : PC 端浏览器正常显示 ;

移动端浏览器显示效果 : 如果不设置 meta 视口标签 , 在移动端默认的网页宽度为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; body 中的文本会缩小到很小的大小 ;

2、设置 meta 视口标签代码示例

设置 meta 视口标签 , 在移动端默认的网页宽度为设备宽度 , 是理想视口 ; body 中的文本显示正常 ;

推荐视口标签写法 : 所有的手机端网页都设置如下样式 ;

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>meta 视口标签</title>
</head>

<body>
    meta 视口标签
</body>

</html>

显示效果 :