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

Question

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

Answer 1

Google了一下，高分屏跟Retina屏是一个概念。
我按照移动端Retina屏适配的经验，应该可以通过修改viewport的缩放来解决这个问题。

首先明确一下要解决的问题：

1. 如何区分高分屏还是普通屏；
2. 如何对高分屏进行缩放。

解决方法

1. 获取window.devicePixelRatio，也就是俗称的dpr。值为1的是普通屏，大于1的是高分屏。

2. 设置meta标签：

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

   其中，initial-scale为1/dpr。

最后，以上是基于移动端Retina屏的经验，能否适用于PC端我不清楚，也没有相关设备进行实践。如果你使用这个方法能够解决问题希望能够及时反馈。或者有别的方法也希望能给我评论，长长见识。

参考资料

【移动适配】一个像素的border怎么实现

Answer 2

媒体查询 @media