HTML页面关于高分屏的设置

本文主要是介绍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. --><metaname="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>