在 Javascript 中（或通过 css）检测小（移动）屏幕

Question

如果访问者使用小屏幕，我想让我网站上的一些字体变大。理想情况下没有 jquery，因为我想在页面加载的早期执行此操作，并且我不想在稍后加载 jquery，以加快加载速度。

我想出的最好的方法是检查屏幕尺寸。但这远非完美。iphone4的尺寸比较大，但是屏幕小，而一些旧的上网本可能分辨率小但屏幕大。我想我真正想要的是屏幕“DPI”的某种变体。

如果有一些 css 方式说“在小屏幕上做这个，否则在大屏幕上做那个”也行。

Answer 1

在 CSS2 中有一个media属性，而在 CSS3 中这可以用于进行媒体查询。并非所有浏览器都支持它，但可以使用它，因为 iPhone 等小型设备确实支持它。

 @media screen and (min-width: 781px) and (max-width: 840px) {
    body {
      font-size: 13px;
    }
  }

该站点不关心 IE，在 FF 或 Safari 中尝试，更改浏览器宽度并注意使用此属性更改宽度的方式。