Браузърите на iPhone / Android поддържат ли CSS @media handheld?

Можете да използвате @media queries:

<link rel="stylesheet" href="/bgpath/to/iphone.css" media="only screen and (max-device-width:480px)"/>

Тази конкретна версия ще е насочена към iPhone (и всяко друго устройство с екран max-device-width от 480px.

Apple, за iPhone, въпреки че това е по памет, така че не мога да бъда напълно сигурен в точността му, избра да пренебрегне използването на handheld или mobile таблици със стилове, тъй като той и други устройства с iOS бяха способни да рендират css повече или по-малко на равна нога с настолни браузъри, чрез Safari. За други устройства не съм сигурен колко точно са верни, въпреки че статията A List Apart (с връзка към по-горе) дава кратък преглед на някои.

Хм, изглежда, че много нови мобилни устройства имат по-високи разделителни способности (напр. droid X е 854x480). Има ли начин да ги открием? Не мисля, че те се обработват с тази заявка.

Не мога да кажа със сигурност, тъй като нямам достъп до тези устройства, но друг Статия в разделен списък: Адаптивен уеб дизайн отбелязва, че:

За щастие, W3C създаде медийни заявки като част от спецификацията CSS3, подобрявайки обещанието за медийни типове. Медийната заявка ни позволява да насочваме не само към определени класове устройства, но и действително да инспектираме физическите характеристики на устройството, изобразяващо нашата работа. Например, след неотдавнашния възход на мобилния WebKit, медийните заявки се превърнаха в популярна техника от страна на клиента за доставяне на персонализиран стилов лист за iPhone, телефони с Android и други подобни.

Така че предполагам, че те, устройствата с Android, трябва да могат да се насочват чрез @media-queries, но, както беше отбелязано, не мога да кажа с никаква сигурност.

За насочване на разделителната способност на устройството има пример за:

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

Допълнителна информация: Препоръка за W3 кандидат за медийни заявки.

От този сайт има няколко други медийни заявки, които са полезни при насочване към iPhone/телефони с Android:

    // target mobile devices
@media only screen and (max-device-width: 480px) {
    body { max-width: 100%; }
}

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    // CSS goes here
}

// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
@media only screen and (min-resolution: 300dpi) {
    // CSS goes here
}

Успях успешно да използвам медийната заявка за max-device-width, за да насоча успешно към телефони с Android, въпреки че трябваше да коригирам ширината до 800px, а не до изброените 480. За iPhone 4 съотношението -webkit-min-device-pixel-ratio работи за насочване към iPhone4 (max-device-width: 480px не, предполагам, че ще е насочено към iPhone3, но нямах такъв удобен за тестване.)

Виждам, че това става доста объркващо, но ако трябва да поддържате множество устройства и да имате персонализиран CSS за всяко от тях, стига да поддържат медийни заявки, изглежда, че е възможно да направите това, което трябва, за да промените всяка платформа . И да, първо бих кодирал според стандартите, така че колкото се може повече CSS да може да се използва повторно, но много пъти говорим за представяне на алтернативни оформления в наши дни, оразмерени по подходящ начин за използваните устройства.

@media handheld се отнася само за онези древни малки прото-html мобилни телефони от минали години, които дори не можеха да показват уеб страници. ePUB, MOBI, Tablet, общността от доставчици казаха категорично „Ч*к, не, ние не @media handheld устройства!“ защото те правилно се притесняваха, че това ще ги приземи завинаги в ничия земя, подчинена на "истински" уеб страници.

С днешните малки устройства с дисплеи с много висока разделителна способност все още нямаме добър начин да кажем на HTML как да показва нещата "правилно" на големи дисплеи с относително ниска разделителна способност срещу малки дисплеи с много висока разделителна способност. И като сертифициран стар пердах, очите ми биха искали да ви напомнят, че не, отговорът не е просто да направите всичко, включително шрифтовете, 2 пъти по-малко.

Не, нито браузърите на iPhone, нито Android поддържат CSS @media handheld.

Вижте използването на медийната заявка „hover“.

Поставете това във вашия SCSS файл:

// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. laptops, PC's etc).
$point-at-which-use-large-screens: (min-width 990px) (hover hover);

.some-class-you-want-to-target {

  // Some CSS to only apply to larger screens with mouse available.
  @include breakpoint($point-at-which-use-large-screens) {
    color: red;
  }
}

След стартиране на grunt etc на SCSS това ще произведе CSS, изглеждащ така:

@media (min-width: 991px) and (hover: hover) {
  color:red;
}