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

Question

В настоящее время в моем документе 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) ничего не меняется.Я что-то не так делаю или просто не так просто?

Answer 1

Вам нужно будет использовать более сложные медиа-запросы , например, те, которые нацелены на 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 файл)

Answer 2

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

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

Answer 3

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