随着移动端的发展,越来越多的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慕课。