CSS Media Queries Неожиданное поведение - PullRequest
Новая
       5

CSS Media Queries Неожиданное поведение

0 голосов
/ 06 июля 2011

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

Windows 7 64

Chrome :

Получает ориентацию на дополнительном мониторе

FF5 :

Получает ориентацию на дополнительном мониторе

Opera 11,5 :

Получает ориентацию на всех мониторах

IE9 :

Работает, как ожидалось

Пример кода: 

/* CSS Document */
* { margin:0px; padding:0px; }

#pc { background:red; }

@media (max-width:1280px) {
    #pc { background:white; }
    #pc2 { background:red; }
}

@media (max-device-width:1280px) and (orientation: landscape) {
    #pc { background:white; }
    #tablet_andr_ls { background:red; }
}

@media (max-device-width:1024px) and (orientation: landscape) {
    #pc { background:white; }
    #tablet_ipad_ls { background:red; }
}

@media (max-device-width:800px) and (orientation: portrait) {
    #pc { background:white; }
    #tablet_andr_pt { background:red; }
}

@media (max-device-width:768px) and (orientation: portrait) {
    #pc { background:white; }
    #tablet_ipad_pt { background:red; }
}

Пример HTML: 

<div id="container">

    <div id="pc"><p>PC Huge</p></div>

    <div id="pc2"><p>PC Small</p></div>

    <div id="tablet_andr_ls"><p>Android Tablet: Orientation Landscape</p></div>

    <div id="tablet_ipad_ls"><p>iPad Tablet: Orientation Landscape</p></div>

    <div id="tablet_andr_pt"><p>Android Tablet: Orientation Portrait</p></div>

    <div id="tablet_ipad_pt"><p>iPad Tablet: Orientation Portrait</p></div>

    <div id="smartphone"><p>Smart phone</p></div>

</div>

1 Ответ

1 голос
/ 17 августа 2011

Попробуйте использовать max-width и min-width вместо device-max-width, min / max-width соответствует размеру окна, device-min / max-width будет соответствовать размеру устройства.

...