在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中尝试它，更改浏览器的宽度，并注意使用此属性来更改宽度。

Answer 2

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

请参阅http://jsfiddle.net/neebz/kn7y3/并更改“结果”面板的宽度/高度，以查看其工作情况。