Я установил значения по умолчанию для CSS в менее 4 фреймворке. Они предоставляют медиазапросы, которые изменяют объявление тела на основе «размера браузера». Я добавил объявления, чтобы изменить цвет фона тела, чтобы я мог видеть, какой медиа-запрос запускается, когда я масштабирую свой браузер Google Chrome на своем рабочем столе.
Цвет рабочего стола по умолчанию - белый. Тогда у меня есть макет планшета и мобильный макет как таковой:
/* Tablet Layout: 768px.
Gutters: 24px.
Outer margins: 28px.
Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols 1 2 3 4 5 6 7 8
px 68 160 252 344 436 528 620 712 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
body {
width: 712px;
padding: 10px 20px 60px;
background-color:yellow;
}
}
/* Mobile Layout: 320px.
Gutters: 24px.
Outer margins: 34px.
Inherits styles from: Default Layout.
---------------------------------------------
cols 1 2 3
px 68 160 252 */
@media only screen and (max-width: 767px) {
body {
width: 252px;
padding: 10px 20px 60px;
background-color:pink;
}
}
Он меняет цвет, когда я изменяю размер моего настольного браузера. Но когда я открываю страницу в своем Android-браузере HTC Sensation, она становится желтой. Очевидно, что медиа-запрос не учитывает «размер» моего браузера. Я также прочитал, что есть что-то, называемое viewport, которое, возможно, масштабирует страницу в моем мобильном телефоне так, что разрешение браузера не соответствует порогу медиазапроса. Как мне исправить это, чтобы в моем мобильном телефоне появился правильный медиа-запрос?