記錄一個HTML頁面關於高分屏的踩到的坑。 所謂高分屏，就是在同樣大小的屏幕面積上顯示更多的像素點，這樣可以呈現更好的可視效果的屏幕。例如，我的筆記本是15.6寸，理論上它的屏幕解析度應該是1920 x 1080像素，但實際上我的筆記本屏幕解析度確實2560 x 1440像素，也就是俗稱的2K屏。這 ...
記錄一個HTML頁面關於高分屏的踩到的坑。
所謂高分屏，就是在同樣大小的屏幕面積上顯示更多的像素點，這樣可以呈現更好的可視效果的屏幕。例如，我的筆記本是15.6寸，理論上它的屏幕解析度應該是1920 x 1080像素，但實際上我的筆記本屏幕解析度確實2560 x 1440像素，也就是俗稱的2K屏。這樣的高分屏雖然實現了更加細膩的圖像和更加清晰的文本，但也對軟體適配帶來了問題。
我這裡遇到的問題是，在HTML5頁面中沒有特別設置，PC端的Chrome和Firefox的環境下，window.innerWidth, window.innerHeight這樣的參數，以及滑鼠響應事件中的滑鼠位置，都是物理設備寬度和位置，而不是實際像素的寬度和位置。在安卓端的Firefox，也是物理設備寬度和位置，但是安卓端的Chrome確是實際像素的寬度和位置，導致行為表現不一致。
為了相容這種情況，可以在HTML頭中增加一個viewport元標簽，並設置屬性，具體如下設置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>High DPI Support</title>
</head>
<body>
</body>
</html>
在這個viewport元標簽中，width=device-width表示設置了視口的寬度等於設備的屏幕寬度，initial-scale=1.0表示設置初始縮放比例為1。
更具體來說，我這裡使用的是three.js進行三維圖形渲染，如果沒有viewport元標簽，在安卓端的Chrome中進行位置相關的計算總是不正確，研究了很久才找到是高分屏支持的問題。同樣是三維圖形渲染，Cesium.js官方提供的例子就增加了viewport元標簽：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Hello World!</title>
</head>
<body>
</body>
</html>
其實viewport元標簽只要學習過Cesium的案例就有印象，但也是泛泛而過。直到遇到了問題踩坑了才明白原來是這回事，因此將這個問題記錄一下。
