本文原创,转载说明一下出处。
本文作者:山茶树和葡萄树
原贴地址:《浏览器的layout viewpoint和visual viewpoint》
本文链接:http://blog.csdn.net/xianghongai/article/details/76691347
浏览器视口(viewpoint)在PC端和移动端展现行为一致。
PC端,浏览器窗口大小是可以超过或小于设备屏幕分辨率的,
移动端,浏览器窗口固定;
浏览器视口由两部分组成:
- layout viewpoint
- visual viewpoint
layout viewpoint
,布局视图,映射/渲染document
(结构、样式、行为);响应式布局尺寸会受窗口大小变化制约,影响document
展现;
visual viewpoint
,视觉视图,映射layout viewpoint
,缩放布局视口而不影响它尺寸,让document
视觉上看起来比原始值有差异,实际元素尺寸无变法;
但是移动端,屏幕逻辑像素太小,浏览器会给layout viewpoint
设置一个比较大的默认值,通常为 980px
;
移动端,layout viewpoint
大小可以通过<meta name="viewport">
调整;
可以设置<meta name="viewport" content="width=device-width">
限制layout viewpoint
大小,visual viewpoint
不受影响正常缩放;
可以设置<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
限制layout viewpoint
和visual viewpoint
大小。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<!-- 大部分设备默认 视窗 是 980px -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
div {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
font-size: 16px;
/* background: url('./bg.png') no-repeat top left; */
/* background-size: cover; */
}
.demo {
/* width: 100% !important; */
height: 100px;
border-top: 2px solid #000;
font-size: 1rem;
color: #333;
float: left;
}
/* iPhone 4/5/SE */
.w320 {
width: 320px;
}
/* iPhone 6/7/8 */
.w375 {
width: 360px;
}
/* iPhone 6/7/8 Plus */
.w414 {
width: 414px;
}
/* xhdpi */
.w360 {
width: 360px;
}
/* 默认 */
.w980 {
width: 980px;
}
.list__item {
float: left;
width: 245px;
height: 100px;
border-right: 10px solid #f00;
box-sizing: border-box;
text-align: center;
}
@media screen and (resolution: 2dppx) {
.list__item {
width: 50%;
}
}
@media screen and (resolution: 3dppx) {
.list__item {
width: 25%;
}
}
h2 {
clear: both;
}
</style>
</head>
<body>
<br>
<div class="demo w320">320</div>
<div class="demo w375">375</div>
<div class="demo w414">414</div>
<div class="demo w360">360</div>
<div class="demo w980">980</div>
<div class="list">
<div class="list__item">245</div>
<div class="list__item">245</div>
<div class="list__item">245</div>
<div class="list__item">245</div>
</div>
<h2 id="demo"></h2>
<h2 id="demo2"></h2>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script>
$(document).ready(function () {
// 设备像素比
window.getDevicePixelRatio = function () {
var ratio = 1;
// 要考虑缩放,请更改为使用deviceXDPI而不是systemXDPI
if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI >
window.screen.logicalXDPI) {
// 只允许值 > 1
ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
} else if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
return ratio;
};
// 窗口尺寸
function windowSizeHandler() {
$("#demo").html(
"Device Pixel Ratio:" + window.getDevicePixelRatio() +
"<br><br>$(window).innerWidth():" + $(window).innerWidth() +
"<br>$(window).innerHeight():" + $(window).innerHeight() +
"<br><br>$(window).outerWidth():" + $(window).outerWidth() +
"<br>$(window).outerHeight():" + $(window).outerHeight() +
"<br><br>$(window).width():" + $(window).width() +
"<br>$(window).height():" + $(window).height() +
"<br><br>window.screen.width:" + window.screen.width +
"<br>window.screen.height:" + window.screen.height +
"<br><br>window.screen.availWidth:" + window.screen.availWidth +
"<br>window.screen.availHeight:" + window.screen.availHeight +
"<br><br>document.body.clientWidth:" + document.body.clientWidth +
"<br>document.body.clientHeight:" + document.body.clientHeight +
"<br><br>document.body.offsetWidth:" + document.body.offsetWidth +
"<br>document.body.offsetHeight:" + document.body.offsetHeight +
"<br><br>document.body.scrollWidth:" + document.body.scrollWidth +
"<br>document.body.scrollHeight:" + document.body.scrollHeight +
"<br><br>document.documentElement.clientWidth:" + document.documentElement.clientWidth +
"<br>document.documentElement.clientHeight:" + document.documentElement.clientHeight +
"<br><br>document.documentElement.offsetWidth:" + document.documentElement.offsetWidth +
"<br>document.documentElement.offsetHeight:" + document.documentElement.offsetHeight +
"<br><br>document.documentElement.scrollWidth:" + document.documentElement.scrollWidth +
"<br>document.documentElement.scrollHeight:" + document.documentElement.scrollHeight +
"");
}
windowSizeHandler();
$(window).on('resize', function () {
windowSizeHandler();
});
// 视图尺寸
function viewportHandler() {
// console.log(window.visualViewport);
$('#demo2').html(
"window.visualViewport:" +
"<br>width: " + window.visualViewport.width +
"<br>height: " + window.visualViewport.height +
"<br>offsetLeft: " + window.visualViewport.offsetLeft +
"<br>offsetTop: " + window.visualViewport.offsetTop +
"<br>pageLeft: " + window.visualViewport.pageLeft +
"<br>pageTop: " + window.visualViewport.pageTop +
"<br>scale: " + window.visualViewport.scale
);
}
viewportHandler();
window.visualViewport.addEventListener('scroll', _.throttle(viewportHandler, 3000));
window.visualViewport.addEventListener('resize', _.debounce(viewportHandler, 300));
});
</script>
</body>
</html>