devicePixelRatio屬性
該 Window 屬性 devicePixelRatio 能夠返回當前顯示設備的物理像素分辨率與 CSS 像素分辨率的比率。此值也可以解釋為像素大小的比率：一個 CSS 像素的大小與一個物理像素的大小的比值。簡單地說，這告訴瀏覽器應該使用多少個屏幕的實際像素來繪制單個 CSS 像素。
這在處理標准顯示與 HiDPI 或 Retina 顯示之間的差異時很有用，它使用更多屏幕像素繪制相同對象，從而產生更清晰的圖像。
當此值發生變化時（例如，如果用戶將 window 拖到具有不同像素密度的顯示器上），則無法通知該值。由於沒有可用於檢測像素密度變化的回調或事件，因此唯一的方法是定期檢查其 devicePixelRatio 值是否已更改。不要經常這樣做，否則會影響性能。
window.screen.deviceXDPI 屬性返回顯示屏幕的每英寸水平點數。
window.screen.logicalXDPI 屬性可返回顯示屏幕每英寸的水平方向的常規點數。
window.outerWidth屬性設置或返回窗口的外部寬度，包括所有的界面元素（如工具欄/滾動）
window.innerwidth 返回窗口的文檔顯示區的寬度。
禁止瀏覽器縮放頁面示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>瀏覽器網頁內容的百分比縮放（按Ctrl和+號鍵或者-號鍵的縮放）</title>
<style type="text/css">
</style>
</head>
<body>
<a href="javascript:;" id="openApp">知乎客戶端</a>
<input type="text" name="ee" autocomplete="on">
</body>
</html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 判斷pc瀏覽器是否縮放，若返回100則為默認無縮放，如果大於100則是放大，否則縮小
function detectZoom (){
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}else if (~ua.indexOf('msie')) { //檢測IE瀏覽器的版本
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
}else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio){
ratio = Math.round(ratio * 100);
}
return ratio;
};
//window.onresize 事件可用於檢測頁面是否觸發了放大或縮小。
$(window).on('resize',function(){
isScale();
});
//判斷PC端瀏覽器縮放比例不是100%時的情況
function isScale(){
var rate = detectZoom();
if(rate != 100){
//如何讓頁面的縮放比例自動為100,'transform':'scale(1,1)'沒有用，又無法自動條用鍵盤事件，目前只能提示讓用戶如果想使用100%的比例手動去觸發按ctrl+0
alert('當前頁面不是100%顯示，請按鍵盤ctrl+0恢復100%顯示標准，以防頁面顯示錯亂！')
}
}
//阻止pc端瀏覽器縮放js代碼
//由於瀏覽器菜單欄屬於系統軟件權限，沒發控制，我們着手解決ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁面的情況，只能通過js來控制了
// jqeury version
$(document).ready(function () {
// chrome 瀏覽器直接加上下面這個樣式就行了，但是ff不識別
$('body').css('zoom', 'reset');
$(document).keydown(function (event) {
//event.metaKey mac的command鍵
if ((event.ctrlKey === true || event.metaKey === true)&& (event.which === 61 || event.which === 107 || event.which === 173 || event.which === 109 || event.which === 187 || event.which === 189)){
event.preventDefault();
}
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
});
});
</script>