<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-moible-web-app-capable" content="yes">
<meta name="apple-moible-web-app-status-bar-style" content="black">
<title>Get Screen Resolution of Mobile Devices with JavaScript</title>
<meta content=" Detect Screen 检测客户端显示窗口大小 " name="keywords">
<meta content=" Detect Screen 检测客户端显示窗口大小" name="description">
<meta name="author" content="Geovin Du 涂聚文">
<style type="text/css">
.ht,.wd{
width:80px;
height:10px;
}
</style>
<script src="Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript">
//edit: Geovin Du from https://stackoverflow.com/questions/2242086/how-to-detect-the-screen-resolution-with-javascript
// https://ryanve.com/_php/airve/chromosome/request.php?request=lab/resolution/
$(document).ready(function () {
//1
var width = window.screen.width * window.devicePixelRatio;
var heiht = window.screen.height * window.devicePixelRatio;
$(‘#swidth‘).val(width);
$(‘#sheight‘).val(heiht);
//2
heiht =window.screen.availHeight
width =window.screen.availWidth
$(‘#swidth2‘).val(width);
$(‘#sheight2‘).val(heiht);
//3
heiht =window.screen.height
width = window.screen.width
$(‘#swidth3‘).val(width);
$(‘#sheight3‘).val(heiht);
width = window.innerWidth
heiht = window.innerHeight
$(‘#swidth4‘).val(width);
$(‘#sheight4‘).val(heiht);
//var res = require(‘res‘)
//res.dppx() // 1
//res.dpi() // 96
//res.dpcm() // 37.79527559055118
});
function getResolution() {
var width = window.screen.width * window.devicePixelRatio;
var heiht = window.screen.height * window.devicePixelRatio;
$(‘#swidth‘).val(width);
$(‘#sheight‘).val(heiht);
//alert("Your screen resolution is: " + window.screen.width * window.devicePixelRatio + "x" + window.screen.height * window.devicePixelRatio);
}
!function (root, name, make) {
if (typeof module != ‘undefined‘ && module.exports) module.exports = make()
else root[name] = make()
}(this, ‘res‘, function () {
var one = { dpi: 96, dpcm: 96 / 2.54 }
function ie() {
return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
}
function dppx() {
// devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
return typeof window == ‘undefined‘ ? 0 : +window.devicePixelRatio || ie() || 0
}
function dpcm() {
return dppx() * one.dpcm
}
function dpi() {
return dppx() * one.dpi
}
return { ‘dppx‘: dppx, ‘dpi‘: dpi, ‘dpcm‘: dpcm }
});
</script>
</head>
<body>
<div>width*height</div>
<div><input class="wd" id="swidth" type="text" /><input class="ht" id="sheight" type="text" /><br /></div>
<div><input class="wd" id="swidth2" type="text" /><input class="ht" id="sheight2" type="text" /><br /></div>
<div><input class="wd" id="swidth3" type="text" /><input class="ht" id="sheight3" type="text" /><br /></div>
<div><input class="wd" id="swidth4" type="text" /><input class="ht" id="sheight4" type="text" /><br /></div>
<div><button type="button" onclick="getResolution();">Get Resolution</button></div>
</body>
</html>
javascript: detect screen size
原文：https://www.cnblogs.com/geovindu/p/14392612.html