您的位置：首页 > Web前端 > HTML5

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

2017-02-06 09:00 204 查看
做移动站有一个必要的知识，就是关于屏幕宽度以及缩放问题。我们习惯性的在

        <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>


不同分辨率效果同



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航