Проблема с медиа-запросом для планшета Twitter Bootstrap 800px?

В настоящее время я создаю сайт с отзывчивым макетом начальной загрузки, который у меня отлично работает в моем браузере, но по какой-то причине, когда я просматриваю тот же сайт на своем планшете Nexus 7 (экран 1200 x 800) в портретном формате, сайт отображается с помощью медиа-запроса @media (максимальная ширина: 767 пикселей) вместо @media (минимальная ширина: 768 пикселей) и (максимальная ширина: 979 пикселей).

Интересно, что я проверил это на начальной загрузке [сайты-примеры][1], и точно то же самое происходит, даже несмотря на то, что размер экрана достаточно велик для медиа-запроса @media (минимальная ширина: 768 пикселей) и (максимальная ширина: 979 пикселей). Правильный запрос загружается, когда планшет в ландшафтном формате.

Вот точки останова начальной загрузки.

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Могу ли я что-нибудь сделать, чтобы убедиться, что планшет принимает правильный медиа-запрос?


person photoman355    schedule 12.10.2012    source источник
comment
я ответил на твой вопрос?   -  person tim peterson    schedule 04.10.2013


Ответы (1)


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

Я обнаружил, что вызов следующего javascript всегда совпадает с медиа-запросом:

window.innerWidth

Что это показывает для вашего Nexus 7?

См. это в качестве справки для обсуждения видовых/медиа-запросов: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

person tim peterson    schedule 08.03.2013