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

如果访问者使用的是小屏幕，我想将网站上的一些字体放大。理想情况下不使用jquery，因为我希望在页面加载的早期就这样做，并且我不希望在以后加载jquery，以便更快地加载

我想出的最好办法就是检查屏幕大小。但这远非完美。iphone4的尺寸相对较大，但屏幕较小，而一些老式上网本的分辨率可能较小，但屏幕较大。我想我真正想要的是屏幕DPI的一些变体

如果在小屏幕上有css的说法，那么在大屏幕上也可以这样做。

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

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

---

不关心IE，在FF或Safari中试用，更改浏览器宽度，并使用此属性注意宽度的变化。

媒体查询是关键，使用起来很有趣

查看并更改“结果”面板的宽度/高度，以查看其是否正常工作

---

示例取自：

@媒体出现在CSS 2中，但您使用的媒体查询在CSS 3中是新的。小水平视口分辨率不是小移动屏幕的可靠指标，因为桌面浏览器可以调整大小。在某些情况下，这是一件好事。如果他们出于某种原因使桌面视口变得非常小，我希望我的网站在这一点上看起来也不错。