HTML页面关于高分屏的设置

  • HTML页面关于高分屏的设置已关闭评论
  • 33 次浏览
  • A+
所属分类:Web前端
摘要

记录一个HTML页面关于高分屏的踩到的坑。所谓高分屏,就是在同样大小的屏幕面积上显示更多的像素点,这样可以呈现更好的可视效果的屏幕。例如,我的笔记本是15.6寸,理论上它的屏幕分辨率应该是1920 x 1080像素,但实际上我的笔记本屏幕分辨率确实2560 x 1440像素,也就是俗称的2K屏。这样的高分屏虽然实现了更加细腻的图像和更加清晰的文本,但也对软件适配带来了问题。

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