Медиа-запросы не работают для мобильного IE - PullRequest
Новая
       33

Медиа-запросы не работают для мобильного IE

2 голосов
/ 15 ноября 2011

Я определил следующие медиазапросы для загрузки различных файлов .css для мобильных и настольных браузеров: 

<link rel="stylesheet" type="text/css" media="screen" href="desktop.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Но в мобильном Internet Explorer я почему-то вижу стили из desktop.css. Почему так? Как я могу это исправить?

Ответы [ 3 ]

3 голосов
/ 16 ноября 2011

Использование handheld ненадежно в мобильных браузерах, некоторые мобильные браузеры (например, Mobile Internet Explorer) используют media="handheld", если это единственное определенное значение, но используют media="screen" по умолчанию, если определены оба. Хак должен определить media="Screen" с прописными буквами S, это заставляет Mobile IE использовать опцию handheld, когда оба определены. Но я бы посоветовал вам не использовать эти медиазапросы, так как вам следует полагаться на разрешение экрана, а не на мобильный браузер. Например, Mobile Safari может работать как на iPad, так и на iPhone, но вам нужно по-разному оформлять веб-сайт из-за разного размера экрана. Таким образом, вы можете использовать следующие медиа-запросы для iPhone: 

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

для iPad 

<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="ipad.css" />

для рабочего стола 

<link rel="stylesheet" media="screen and (min-width: 960px)" href="desktop.css" />

Или вы можете указать медиазапросы непосредственно в файле .css 

@media screen and (min-width: 960px) {
  .class {
    background: #ccc;
  }
}

Вот несколько хороших статей об этом:

http://webdesignerwall.com/tutorials/css3-media-queries

http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

1 голос
/ 16 ноября 2011

Применяется потому, что наладонник - это тоже экран. Попробуйте скрыть версию для настольного компьютера с помощью медиазапроса, такого как этот: 

media="screen and (min-device-width:500px)"

IE не распознает media="handheld": http://msdn.microsoft.com/en-us/library/ms530813(VS.85).aspx Я принимаю это обратно. Мобильный IE признает, что: http://msdn.microsoft.com/en-us/library/bb415462.aspx

0 голосов
/ 19 февраля 2016

Используйте CSS для Windows Lumia 535

@ только для экрана мультимедиа и (min-device-width: 360px) и (max-device-width: 640px) и (ориентация: портрет) и-ms-высокая контрастность: нет), (-ms-высокая контрастность: активна) {}

Использовать CSS для Windows Lumia 520

@ только для экрана мультимедиаи (min-device-width: 320px) и (max-device-width: 480px), а также (ориентация: альбомная) и (-ms-высокая контрастность: нет), (-ms-высокая контрастность: активна) {// ваш код идет сюда}

...