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>
