视口概念、移动端视口适配

心已赠人 2021-07-24 19:08 363阅读 0赞

视口
    	视图窗口,页面中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-scala=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>