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