移动web 的viewport设置注意事项的详细解释六一快乐=-_-_

最新推荐文章于 2022-11-30 17:16:40 发布

weixin_30672295

最新推荐文章于 2022-11-30 17:16:40 发布

阅读量44

点赞数

原文链接：http://www.cnblogs.com/yongege/p/6931189.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--对viewport的设置的meta建议写在已有的meta标签(<meta charset="UTF-8">)之后-->
    <!--name="viewport":说明当前meta标签是用来设置viewport的属性的，
     这个属性只有在    移动端     才会有效-->
    <!--content="":进行viewport的设置
    width:设置viewport的宽度  device-width:获取当前设备的宽度
    initial-scale=1:设置初始缩放比例  当我们设置width=device-width，也达到了initial-scale=1的效果，得知其实 initial-scale = ideal viewport / layout viewport  意味着，如果initial-scale设置为1，相当于设置了两个viewport的宽度一致
    maximum-scale:设置最大的缩放比例
    minimum-scale:设置    默认状态    下最小的缩放比例-->
    <!--<meta name="viewport" content="width=device-width">-->
    <!--<meta name="viewport" content="initial-scale=1
    user-scalable:设置是否允许用户进行缩放yes/no">-->

    <!--兼容：在device-width和inital-scale
    不同的手机   和  不同系统版本   （手机品牌和型号太多了，指不定出什么幺蛾子）
    之间的识别情况不同，所以都得写上，不然适配会出现问题-->
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100%;
            height: 200px;
            background-color: pink;

        }
    </style>
</head>
<body>
<div>移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置来进行控制，并改变浏览器默认的layout viewport的宽度。</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--对viewport的设置的meta建议写在已有的meta标签(<meta charset="UTF-8">)之后-->
    <!--name="viewport":说明当前meta标签是用来设置viewport的属性的，
     这个属性只有在    移动端     才会有效-->
    <!--content="":进行viewport的设置
    width:设置viewport的宽度  device-width:获取当前设备的宽度
    initial-scale=1:设置初始缩放比例  当我们设置width=device-width，也达到了initial-scale=1的效果，得知其实 initial-scale = ideal viewport / layout viewport  意味着，如果initial-scale设置为1，相当于设置了两个viewport的宽度一致
    maximum-scale:设置最大的缩放比例
    minimum-scale:设置    默认状态    下最小的缩放比例-->
    <!--<meta name="viewport" content="width=device-width">-->
    <!--<meta name="viewport" content="initial-scale=1
    user-scalable:设置是否允许用户进行缩放yes/no">-->

    <!--兼容：在device-width和inital-scale
不同的手机   和  不同系统版本   （手机品牌和型号太多了，指不定出什么幺蛾子）
    之间的识别情况不同，所以都得写上，不然适配会出现问题-->
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">-->
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
body{
padding: 0;
margin: 0;
}
div{
width: 100%;
height: 200px;
background-color: pink;

}
</style>
</head>
<body>
<div>移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置来进行控制，并改变浏览器默认的layout viewport的宽度。</div>
</body>
</html>

转载于:https://www.cnblogs.com/yongege/p/6931189.html

weixin_30672295

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web 的viewport设置注意事项的详细解释六一快乐=-_-_

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <!--name="viewp...
复制链接

扫一扫