HTML頁面關於高分屏的設定

charlee44發表於2024-05-03
HTML

記錄一個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的案例就有印象，但也是泛泛而過。直到遇到了問題踩坑了才明白原來是這回事，因此將這個問題記錄一下。

相關文章