提问: 如果是pc的网页如何在移动端进行显示?
历史: 最早期pc端没办法直接查看pc网页，乔布斯为了移动端能访问pc网页，且不出现横向滚动条，发明了视口,视口是默认存在的
视口有两个特征
1.宽度980px;
2.可以缩放;
01.png
视口是什么?
视口是一个介于html网页和手机浏览器之间的一个容器
02.png
视口的演示
代码如下
当页面没有设置视口的视口的时候,我们切换到手机模式时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.img {
width: 320px;
height: 480px;
background-color: red;
}
</style>
<body>
<div class="img"></div>
</body>
</html>
运行页面如下
03.png
结论
不论手机端的使用的是什么宽度的设备,手机的页面的宽度值,始终是980px;而我们想要盒子宽度撑满手机宽度，此时就需要加上视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.img {
width: 320px;
height: 200px;
background-color: red;
}
</style>
<body>
<div class="img"></div>
</body>
</html>
04.png
05.png
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
代码解释: 设置视口,name="viewport" 然后设置宽度等于手机设备宽度,width=device-width.
网友评论