在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/並更改“結果”面板的寬度/高度，以查看其工作情況。