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

posted @   charlee44  阅读(169)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
历史上的今天:
2021-05-03 JavaScript异步编程3——Promise的链式使用
2019-05-03 C/C++创建多级目录
点击右上角即可分享
微信分享提示