iOS Webkit игнорирует медиа-запросы

Я работаю над веб-сайтом ( вилла-антония ) с использованием подхода, основанного на мобильных устройствах. То есть, сначала я использую CSS для мобильных устройств, а затем добавляю / перезаписываю стили со средствами массовой информации для более высоких разрешений. Дело в том, что в iPhone фоновое изображение загружается поверх всего, несмотря на то, что внутри медиа-запроса используется более высокое разрешение.

Это часть файла CSS (часть, которая, как мне кажется, задействована):

body { background: #c70000; overflow: auto; -webkit-overflow-scrolling: touch; } /* Minimum width of 960 pixels. */ @media only screen and (min-width: 960px) { body { background: transparent url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } } 

В моем понимании CSS iPhone не должен даже загружать изображение bg.jpg, поскольку находится внутри медиа-запроса. Но это то, что я получаю, когда немного прокручиваю вниз:

вильна-антония вид с iPhone 5

Автомобиль, который вы видите, является частью bg.jpg, чем больше я прокручиваю вниз, тем больше bg.jpg он отображается на экране.

Я действительно не знаю, почему загружается изображение … любые идеи?

PS: То же самое происходит в iPad и iPhone 4 (и все остальные устройства, которые можно протестировать на iOS-симуляторе).

По умолчанию браузеры iOS предоставляют набор параметров экрана по умолчанию, независимо от фактического разрешения экрана или ориентации .

Чтобы заставить их предоставить фактические размеры экрана, есть метатег, которым они будут подчиняться:

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

Если вы добавите это на свои страницы, то ваши команды @media должны работать с фактическими значениями экрана для каждого устройства.

Я нашел эти ссылки полезными:

ОК. Поскольку я думал, что решение было простым и не имело ничего общего с медиа-запросами CSS>. <

Это было так давно, так как я закодировал первый прототип веб-сайта, который я не помнил, что загружал изображение bg.jpg через инструкцию javascript, используя aystretch как резерв backgroun-size: cover ;.

Спасибо всем за ваши ответы и время.

  • Ошибка теневого распространения в WebKit в iOS 7 на iPad Retina
  • Как изменить цвет элемента HTML, когда пользователь нажимает на него?
  • -webkit-transform Запрещает страницу с загрузки
  • Есть ли способ установить референт в первоначальном запросе, сделанном SFSafariViewController?
  • Удалить 3 пикселя в текстовом поле iOS / WebKit
  • Прокрутка iOS Safari вверх не работает на определенных страницах. Зачем?
  • Не удалось выполнить команду com.apple.WebKit.WebContent
  • Это Facebook для iOS WebView User Agent?
  • Прозрачный SVG в iOS WebKit
  • Исправлена ​​навигация, когда прыгали -webkit-overflow-scrolling: touch;
  • Youtube iframe встраивается с масштабированием webkit-transform на iOS
  • Давайте будем гением компьютера.