Этот мультимедийный запрос, похоже, работает, когда я изменяю размер окна окна просмотра в своем браузере, но когда я запускаю сайт на смартфоне, он выглядит увеличенным. Когда я уменьшаю масштаб, все выглядит нормально, но когда он загружает, он выглядит увеличенным ... поэтому я могу только предположить, что что-то не сломается правильно.медиа-запросы, не работающие для смартфонов
Вот что у меня в мета-тег:
<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0">
А вот первый запрос СМИ, что у меня есть в моем CSS: размер Тело по умолчанию документа (при их просмотре на веб-браузер компьютер) - 1200 пикселей.
@media screen and (min-width:481px) and (max-width:800px){
body {
width:800px;
}
.container {
width: 100%;
margin: auto;
background-image:url("img/background.jpg");
}
Любые идеи относительно того, почему это может не работать?
EDIT:
У меня также есть медиазапросы для меньших размеров окна просмотра, что я добавляю к моей должности. Так что он должен запускаться на смартфоне, не так ли?
@media only screen and (min-width:375px) and (max-width:667){
body {
width:480px;
margin: 0 auto;
}
.container {
width: 100%;
margin: auto;
background-image:url("img/background.jpg");
}
#logo {
color: white;
margin: 0 auto;
padding:0px;
text-transform:uppercase;
letter-spacing: 6px;
padding-top:110px;
font-size: 13px;
}
Просто любопытно, на каком телефоне вы проверяете это? Имеет ли дисплей 320 пикселей или 480 пикселей? Заботиться, чтобы поделиться? – drip
это iPhone 6 плюс. Я не уверен в размерах верхней части головы, но я думаю, что ее больше 480 ... Я также открыл ее на iPad, и, похоже, она запускает настольную версию сайта. – newman