Почему "width = device-width" полностью не работает?
У меня проблема с настройкой медиа-запросов на устройствах. Это вообще не работает. Работает как обычная ширина. Это почему?
<meta charset = "UTF-8" content = "initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
И вот как я его использую:
@media only screen and (min-width: 600px) {
background-color: lightblue;
}
«Работает как обычная ширина» - что это значит?
не могли бы вы добавить больше кода вашего html и css или скрипки ??
«И вот как я его использую» - Какой результат вы ожидаете получить от какого кода? Какой результат вы на самом деле получите?
Я пытаюсь установить этот цвет на мобильных устройствах, планшетах и компьютерах, но он работает только на компьютере.
Какое мобильное устройство должно иметь ширину более 600 пикселей CSS?
Это только пример. Не работает ни с какой шириной.
Ответы 1
Все очень просто. Вы не добавили background-color: lightblue; в тег
это должно быть что-то вроде тега html или body.
Вам также следует обновить свой метатег на
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
Ваш код должен выглядеть примерно так:
html{
background-color:red;
}
@media only screen and (min-width: 600px) {
html{
background-color: lightblue;
}
}<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">Если вы хотите, чтобы веб-страница стала светло-голубой, когда она меньше 600 пикселей, вы должны поменять местами два цвета.
Для получения дополнительной информации вы можете перейти к w3schools, они очень четко объясняют медиа-запросы.
Я сделал это, и это повлияло на мобильные устройства. Я имею в виду, что каждое мобильное устройство имеет этот светло-голубой цвет, что очень странно.
чего вы пытаетесь достичь?
потому что это хорошо, что они стали светло-голубыми, это означает, что они больше 600 пикселей, если они меньше 600 пикселей, страница станет красной
Я пытаюсь изменить цвет на всех устройствах с шириной более 600 пикселей, но это влияет на все мобильные устройства, даже с шириной менее 600 пикселей.
вы можете поделиться скрипкой всего вашего кода ?? иначе я не могу тебе помочь
Мне это ясно. Он попытался загрузить мой код в jdfiddle, но он работает, как вы сказали. Но локально он работает так, как будто не обнаруживает, что это устройство. Может ли это быть связано с некоторыми загрузчиками веб-пакетов?
Будет ли это работать, если вы замените свой тег <meta charset = "UTF-8" content = "initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width"> на <meta name = "viewport" content = "width=device-width, initial-scale=1"> этот метатег
я всегда делаю два тега meta, как этот <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, initial-scale=1">
"на девайсах" какие девайсы?