HTML页面关于高分屏的设置

charlee44

发布于 2024-05-04 09:13:50

1680

发布于 2024-05-04 09:13:50

文章被收录于专栏：代码编写世界

记录一个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的案例就有印象，但也是泛泛而过。直到遇到了问题踩坑了才明白原来是这回事，因此将这个问题记录一下。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-05-03，如有侵权请联系 cloudcommunity@tencent.com 删除

html