css3之viewport

最新推荐文章于 2023-09-20 21:59:58 发布

一头小驴

最新推荐文章于 2023-09-20 21:59:58 发布

阅读量239

点赞数

本文链接：https://blog.csdn.net/qq_37326058/article/details/104002617

版权

随着移动端的发展，越来越多的web页面需要适配各种各样的移动终端。移动设备中的浏览器是把页面放在一个虚拟的窗口中的，这个虚拟的窗口就是viewport视口(用户页面的可视区域)。
一个meta标签就可以。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,Initial-scale=0.5,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>	
	<title>Document</title>
	<style>
		body{
			font-family: "微软雅黑";
			background: #222;
			color: #eee;
			margin: 20px auto;
			padding: 0 20px;
			max-width: 1024px;
		}
		img{
			border: 0px;
			width: 100%;
			display: block;
			max-width: 100%;
		}
		#crd{
			font-size: .7em;
			color: #aaa;
		}
	</style>
</head>
<body>
	<h1>viewport</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quae tenetur quibusdam beatae esse vel, deleniti molestias nobis perspiciatis cumque tempore, soluta quia eaque dolorem officiis exercitationem at alias saepe?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor magnam, velit et aperiam, cupiditate impedit? Corporis similique totam maxime possimus laudantium nobis commodi iusto quidem, tempore facilis, quasi officia nesciunt.</p>
	<img src="test.jpg" alt="">
	<p id="cred"><strong>photo credit (CC) Cia de foto <a href="#">Flickr Creative Commons</a></strong></p>
</body>
</html>

浏览器 pc效果：
在这里插入图片描述
浏览器移动端预览效果：（郁闷的是我不加viewport 它也会自动调整。。。。。）

以上内容来自mooc慕课。

一头小驴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3之viewport

随着移动端的发展，越来越多的web页面需要适配各种各样的移动终端。移动设备中的浏览器是把页面放在一个虚拟的窗口中的，这个虚拟的窗口就是viewport视口(用户页面的可视区域)。一个meta标签就可以。<meta name="viewport" content="width=device-width,Initial-scale=0.5,maximum-scale=1.0,minimu...
复制链接

扫一扫