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

最新推荐文章于 2021-10-10 18:46:50 发布

xubuhui

最新推荐文章于 2021-10-10 18:46:50 发布

阅读量926

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/xubuhui/article/details/103865090

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

通过设置属性content="“实现，中间以逗号分隔
例如<meta name="viewport' content="width=device-width">
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">
    <!--对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">-->

    <!--为了达到兼容：-->
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">-->
    <!--meta:vp+tab-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

xubuhui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动Web开发——视口的概念及设置

视口（viewport）是用来约束网站中最顶级块元素<html> 的，即它决定了<html>的大小在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。viewport是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其它移动设备厂商采纳，其使用参数如下：通过设置属性content="“实现，中间以逗号分隔例如&lt...
复制链接

扫一扫