前端是否有方法判断笔记本高分屏?

Question

比如14寸1920*1080的笔记本屏幕,网页字体在这个屏上显示会很小。
js是否有方法判断，并相应调整字体？ 浏览器的放大功能不算。

Answer 1

Google了一下，高分屏跟Retina屏是一个概念。 我按照移动端Retina屏适配的经验，应该可以通过修改viewport的缩放来解决这个问题。首先明确一下要解决的问题：如何区分高分屏还是普通屏；如何对高分屏进行缩放。解决方法获取window.devicePixelRatio，也就是俗称的dpr。值为1的是普通屏，大于1的是高分屏。设置meta标签：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">其中，initial-scale为1/dpr。最后，以上是基于移动端Retina屏的经验，能否适用于PC端我不清楚，也没有相关设备进行实践。如果你使用这个方法能够解决问题希望能够及时反馈。

Answer 2

媒体查询 @media