javascript获取浏览器窗口分辨率|浏览器全屏分辨率|屏幕分辨率

浏览器窗口分辨率指显示网页的区域，在PC端由于浏览器窗口大小可调节，这个值是可变的。在手机等移动端浏览器窗口大小不可调节，宽度值是固定的，但竖屏和横屏切换会改变。

浏览器全屏分辨率是指浏览器启用全屏显示隐藏了边栏时的分辨率，在PC上与屏幕分辨率相同，在手机上则是浏览器自身设定的逻辑分辨率。

屏幕分辨率是指显示屏的分辨率，这个检测结果通常等同于其物理分辨率，但一些情况下例外。例如台式机上对浏览器显示内容进行了缩放（非默认的100%），该值会模拟缩放后的屏幕尺寸；重设了屏幕分辨率（非推荐的物理分辨率），该值会显示为重设的分辨率。

相对台式机来说，手机屏幕很小，要清晰阅读网页内容就必需把网页内容放大。所以，手机浏览器通过降低分辨率的做法放大内容，这就造成了手机浏览器即使全屏也小于屏幕分辨率。本页面即可检测出手机浏览器的可见区域分辨率，以及手机浏览器全屏时的分辨率。在检测台式电脑的浏览器分辨率时，拖放浏览器窗口分辨率数值随之变动。台式电脑浏览器无需放大网页内容，所以浏览器全屏时分辨率等于显示器分辨率。你也可以尝试在台式电脑浏览器菜单中找到网页缩放功能并调节，浏览器分辨率数值也会随之改变。

<script>
	function fenbianlv() {
		var W = document.documentElement.clientWidth
		var H = document.documentElement.clientHeight
		var width = screen.width
		var height = screen.height

		document.getElementById("s1").innerHTML = W + '×' + H
		document.getElementById("s2").innerHTML = width + '×' + height
		document.getElementById("s3").innerHTML = width * window.devicePixelRatio + '×' + height * window.devicePixelRatio
	}

	window.onload = function () {
		fenbianlv()
	}
</script>
<p>浏览器窗口分辨率是： <span id="s1"></span></p>
<p>浏览器全屏分辨率是： <span id="s2"></span></p>
<p>屏幕分辨率是： <span id="s3"></span></p>