В настоящее время я создаю сайт с отзывчивым макетом начальной загрузки, который у меня отлично работает в моем браузере, но по какой-то причине, когда я просматриваю тот же сайт на своем планшете 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) { ... }
Могу ли я что-нибудь сделать, чтобы убедиться, что планшет принимает правильный медиа-запрос?