做移动站有一个必要的知识，就是关于屏幕宽度以及缩放问题。我们习惯性的在
<head>
标签之间增加一个
<meta>标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
//窗口设定
name="viewport"
//页面大小屏幕等宽
width=device-width
//初始缩放比例，1.0 表示原始比例大小
initial-scale=1.0
//允许缩放的最小比例
minimum-scale=1.0
//允许缩放的最大比例
maximum-scale=1.0
//用户是否可以缩放，这里 no 表示不可以
user-scalable=no
上面最大最小比例其实就已经限制了无法缩放了，和最后一个是否可以缩放有同样的功
能。
因为不同的手机，分辨率都不同，图片一定要能够自适应等比例缩放，才能保证布局的
正确性。
//设置 max-width 后，图片开始自适应
img {
display: block;
max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>移动开发</title>
<style>
img {
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<img src="img/4.jpg" />
</body>
</html>
不同分辨率效果同
转载请注明原文地址: https://ju.6miu.com/read-662771.html
