移动Web开发——视口的概念及设置

视口（viewport）是用来约束网站中最顶级块元素 的，即它决定了
的大小
在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。
viewport是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其它移动设备厂商采纳，其使用参数如下：

• 通过设置属性content="“实现，中间以逗号分隔
• 例如
• width 设置layout viewport 宽度，其取值可为数值或者device-width。

1.获取PC端视口的大小

    var clientWidth = document.documentElement.clientWidth;
    var clientHeight = document.documentElement.clientHeight;

    console.log('PC设备Viewport的宽度为：' + clientWidth);
    console.log('PC设备Viewport的高度为：' + clientHeight);

2.移动端视口

	var clientWidth, clientHeight;
		var width = $('.width'),
				height = $('.height');
		// 用来获取viewport（移动端默认的视口设置）
		function getSize() {
			clientWidth = window.screen.width;
			clientHeight = window.screen.height;

			width.text('PC设备Viewport的宽度为：' + clientWidth);
			height.text('PC设备Viewport的高度为：' + clientHeight);
		}

		// 调用
		getSize();
		//移动端理想的视口设置
		var screenWidth = window.screen.width;
		var screenHeight = window.screen.height;

		console.log('ideal viewport 的宽度为：' + screenWidth);
		console.log('ideal viewport 的高度为：' + screenHeight);

		console.log('设备像素比例为：' + window.devicePixelRatio);
		

3.移动端viewport的设置

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