Запросы экрана мультимедиа отображаются при осмотре, но не на реальном устройстве
Я пробовал поискать в Google и не могу понять это правильно.
Я сделал коды запросов экрана мультимедиа и область просмотра для iPhone 7 plus, но они просто не отображаются на моем устройстве. Я пробовал проверить Chrome, и он выглядит так, как должен. Это код:
@media screen and (height:736px) and (width:414px){
div.banner{
height:600px;
background-image:url(../../assets/img/mobilehome.jpg)!important
}
@media screen and (height:736px) , screen and (width:414px) { div.banner{ height:600px; background-image:url(../../assets/img/mobilehome.jpg)!important; } } Это должен быть правильный формат css. Не используйте важные, используйте максимальную / минимальную высоту и ширину.
В приведенном выше коде в конце отсутствует символ}. Не знаю, напутал ли он что-то еще.
Извините, я не вставил код полностью. Это фрагмент jsfiddle.net/teddbundy/t1yn84w0/8 (предыдущий удален, поскольку я как бы использую то же изображение, поэтому пользователь не сможет заметить разницу)
Ответы 1
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
Кредиты: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Лучше упомянуть еще один ответ ссылки на stackoverflow. Также op имеет высоту по определенным причинам.
Хотя этот код может (а может и не работать), хороший ответ всегда должен содержать объяснение того, что делает код и как он решает вопрос.
Извините, отредактировал ответ с указанием источника. Что касается объяснения, если кто-то действительно нацелен на одно устройство, использования медиа-запросов css недостаточно, однако эти устройства работают в этом диапазоне (и, вероятно, с дюжиной других). Я осознал проблему с высотой, поэтому я тестирую правило максимальной высоты, но это, вероятно, вызовет проблемы у оператора. Так что я думаю, что javascript, вероятно, будет лучшим вариантом.
Привет, спасибо за ответ. Я пробовал этот код, но он не работает. Код появляется в элементе Inspect, но когда я пытаюсь просмотреть его на реальном устройстве, изображение остается прежним. Этот снимок экрана показывает, что код действительно работает при инспектировании imgur.com/a/R05gboM, а это мой фрагмент jsfiddle.net/teddbundy/90jebfut.
1. Это не связано с PHP - поменяйте теги. 2. Можете ли вы предоставить фрагмент кода SO? Теперь у вас есть синтаксическая ошибка в вашем CSS.