Вопрос: Как использовать атрибут Media для карманных компьютеров тега HTML Link?


В настоящее время в моем документе HTML есть следующие.

<link REL=StyleSheet HREF="/stylesheets/home.css" TYPE="text/css" MEDIA=screen>
<link REL=StyleSheet HREF="/stylesheets/homedark.css" TYPE="text/css" MEDIA=handheld>

Однако на карманном устройстве (мой Android-телефон) ничего не меняется. Есть ли что-то, что я делаю неправильно, или это просто не так просто?


8


источник


Ответы:


Вам нужно будет использовать более продвинутые медиа-запросы , например целевые screen size

Так что больше похоже на

<link rel="stylesheet" href="/stylesheets/homedark.css" type="text/css" 
    media="screen and (max-device-width: 480px)">

В вашей таблице стилей это будет что-то вроде этого

@media only screen and (max-device-width: 480px) {
    //Your styles here
}

http://www.w3.org/TR/css3-mediaqueries/  

Простое обнаружение устройства JS может оказаться полезным:

if( navigator.userAgent.match(/Android/i) || 
    navigator.userAgent.match(/webOS/i) || 
    navigator.userAgent.match(/iPhone/i) || 
    navigator.userAgent.match(/iPod/i)){
     // link to stylesheet
}

Еще лучше сделать что-то вроде комбо ... медиа-запросов и обнаружения устройств / функций.

Это хороший обзор: http://www.csskarma.com/presentations/cssla/slides/mobile_media_touch.pdf  (ПРЕДУПРЕЖДЕНИЕ: pdf-файл)


10



В соответствии с w3schools  в любом случае, тип переносного носителя устарел. Вам нужно будет использовать медиа-запросы, чтобы выполнить то, что вы хотите.

Жаль, что для «телефона» нет типа носителя. Возможность набирать номер действительно является самой отличительной разницей.


1



Возможно, ваш телефон не считает себя карманным в соответствии с любыми критериями, которые W3C использует для этого термина. Современные мобильные браузеры не отличаются от полнофункционального рабочего стола и нигде не ограничены, поскольку оригинальные (бесполезные) WAP-браузеры в сумочках были. Обычно нет необходимости выводить «карманный» тип, поскольку браузер телефона лучше решает, что / как показывать контент, чем сайт.


-2