视口
视图窗口,页面中html元素的显示大小
移动端
页面要想在移动端加载必须进行视口的适配
如果不对页面进行调整,那么在移动端加载页面视口宽度都为980px
解决方案
源信息标签,对页面进行设置
<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'> //表示对页面视口进行约束
(1)做移动端适配添加此标签,使得页面不再按照980px加载,按照所用设备加载
(2)必要内容:
1、width=device-width; 页面大小和设备尺寸大小相同
2、user-scalable=no; 表示用户不可通过两手指伸缩页面大小
3、initial-scalable=1.0; 设置页面加载倍率为1.0
可选内容(控制页面伸缩的保险措施):
1、minimum-scale=1.0; //设置页面最小缩小倍率为1.0
2、maximum-scale=1.0; //设置页面最大放大倍率为1.0
提醒:
这个标签在页面中并不是所有移动端设备都生效,几乎所有的移动设备都不生效
生效:安卓的uc浏览器,chrome
代码示例:
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
<title></title>
<script src='js/underscore.js'></script>
<style>
div{
width:100px;
height: 100px;
background-color:orange;
}
button{
width:200px;
height: 100px;
font-size:30px;
}
</style>
</head>
<body>
<div></div>
<button>登录</button>
<script>
document.querySelector('div').onclick=function()
{
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
</script>
</body>
</html>
