首页 > 代码库 > 移动web 的viewport设置注意事项的详细解释 六一快乐=-_-_
移动web 的viewport设置注意事项的详细解释 六一快乐=-_-_
<!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>
移动web 的viewport设置注意事项的详细解释 六一快乐=-_-_
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。