Как заставить настольные браузеры игнорировать медиазапрос iPhone css3 - PullRequest
Новая
       4

Как заставить настольные браузеры игнорировать медиазапрос iPhone css3

2 голосов
/ 01 июля 2010

Я включаю альтернативную таблицу стилей для устройств iPhone / iTouch . Первоначально я хотел просто использовать handheld тип носителя: 

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?>

который я добавляю к документу DOM таким образом: 

//Add handheld stylesheet
ProcessingInstruction pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'");
doc.InsertBefore(pi, doc.DocumentElement);

//Default css, for everyone else
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage.xsl' media='all'");
doc.InsertBefore(pi, doc.DocumentElement);

К сожалению, браузер iPhone Safari не поддерживает тип носителя handheld. Предложенный Apple обходной путь - использовать медиа-запрос CSS3 , заменив handheld: 

media='handheld'

с запросом, который обнаруживает iPhone- как устройства : 

media="only screen and (max-device-width: 480px)"

Примечание: 480px - это ширина перевернутого iPhone (т.е. альбомная)

Поэтому я включаю этот тип мультимедиа в ссылки на таблицы стилей: 

//Add handheld stylesheet
ProcessingInstruction pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'");
doc.InsertBefore(pi, doc.DocumentElement);

//BUG: iPhone doesn't support handheld media type. Use the CSS3 media query hack
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'");
doc.InsertBefore(pi, doc.DocumentElement);

//Default css, for everyone else
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage.xsl' media='all'");
doc.InsertBefore(pi, doc.DocumentElement);

Что дает XML: 

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?>

И все будет хорошо, за исключением того, что теперь браузеры (т.е. 8, Chrome5) начинают использовать "handheld" xsl.

"браузеры".

Примечание: Firefox (3.5) не поддерживает рендеринг xml контента с xml-stylesheet вообще. Почему я не включать его в список "браузеры".

Я пытался переместить узлы таблицы стилей " all " над медиа-запросом для iPhone: 

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'?>

Но т.е. и Chrome продолжают использовать тип носителя only screen and (max-device-wisth: 480px).

Как мне применить одну таблицу стилей для портативных устройств , а другую - для "все остальные" .

Ответы [ 2 ]

0 голосов
/ 28 апреля 2011

Вот несколько проектов, решающих эту проблему, которые интересны для этой проблемы:

  • 320 и выше :

    «320 и выше» предотвращает мобильные устройства от загрузки ресурсов рабочего стола с помощью используя таблицу стилей крошечного экрана как его отправная точка.

  • Lessframework

    Less Framework - это сеточная система CSS для разработки адаптивных сайтов. Это содержит 4 макета и 3 комплекта пресеты типографики, все на основе одиночная сетка.

0 голосов
/ 08 июля 2010

Не очень знаком с реализацией XML, но вот хорошая статья, которую я только что прочитал о том, как делать это только с помощью атрибута media (который не учитывает пользователей IE) или вместо использования javascript.1004 * -tricks.com / resolution-specific-stylesheets /

Короче говоря, вы указываете идентификатор для <link> что-то вроде:<link rel="stylesheet" type="text/css" href="main.css" /> <link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

Затем используйте js, чтобы определить размер окна браузера, и в зависимости от того, какие параметры вы хотите настроить, вы используете идентификатор в качестве вытяжки для замены значения href соответствующей таблицей стилей.

...