Обнаружить маленький (мобильный) экран в 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/ и измените ширину / высоту панели «Результат», чтобы она работала.

Пример взят из: http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/