Html5移动开发(1)必要知识

最新推荐文章于 2021-04-22 14:04:19 发布

cxd1008

最新推荐文章于 2021-04-22 14:04:19 发布

阅读量459

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/cxd1008/article/details/54889602

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

做移动站有一个必要的知识，就是关于屏幕宽度以及缩放问题。我们习惯性的在
<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>

不同分辨率效果同