Background size cover iphone

CSS background-size: замена обложки для мобильного Safari

Привет у меня есть несколько divs на моей странице, которые имеют фоновые изображения, которые я хочу расширить, чтобы покрыть весь div, который, в свою очередь, может расширяться, чтобы заполнить ширину окна просмотра.

очевидно background-size: cover неожиданно ведет себя на устройствах iOS. Я видел некоторые примеры, как это исправить, но я не могу заставить их работать в моей ситуации. В идеале я бы предпочел не добавлять лишний теги в HTML, но если это единственный способ, то я буду.

вопрос в том, как я могу получить фоновое изображение, чтобы полностью покрыть раздел div, принимая во внимание переменную ширину браузера и переменную высоту содержимого в div?

10 ответов

у меня была эта проблема на многих мобильных представлениях, которые я недавно построил.

мое решение по-прежнему является чистым резервным CSS

http://css-tricks.com/perfect-full-page-background-image/ как три великих метода, последние два являются отступлениями, когда крышка CSS3 не работает.

HTML-код

в CSS

у меня недавно была аналогичная проблема и я понял, что это не из-за background-size:cover но background-attachment:fixed .

я решил проблему с помощью медиа-запроса для iPhone и настройки background-attachment свойство scroll .

для моего случая:

Edit: блок кода находится в LESS и предполагает предопределенную переменную для @iphone-screen . Спасибо за уведомление @stephband.

это работает на Android 4.1.2 и iOS 6.1.3 (iPhone 4) и выключателей для рабочего стола. Написано для отзывчивых сайтов.

на всякий случай, в вашей HTML-голове, что-то вроде этого:

есть ответы по сети, которые пытаются решить эту проблему, однако ни один из них не работал правильно для меня. Цель: поместить фоновое изображение на body и background-size: cover; работа мобильная, без медиа-запросов, overflows , или hacky z-index: -1; position: absolute; накладки.

вот что я сделал, чтобы решить эту проблему. Он работает на Chrome на Android, даже когда клавиатура ящик активен. Если кто-то хочет протестировать iPhone, это было бы круто:

вот магия. Лечить html как обертка с соотношением принудительной высоты относительно фактического окна просмотра. Вы знаете классический отзывчивый тег ? Вот почему это. Кроме того, на поверхности это выглядело бы как body должны получить эти правила, и это может выглядеть ОК. пока не изменится высота, как при открытии клавиатуры.

для версий Safari 5.1 С помощью CSS3 свойства background-size не работает. В таких случаях вам нужно webkit .

поэтому вам нужно использовать указать фон-в размере.

следовательно использовать -webkit-background-size:cover .

Я нашел следующее На веб-сайте Стивена Гилберта -http://stephen.io/mediaqueries/. Она включает в себя дополнительные устройства и их ориентацию. Работает на меня!

Примечание: Если вы скопируете код с его сайта, вы захотите отредактировать его для дополнительных пробелов, в зависимости от используемого редактора.

Источник

Почему CSS background-size: cover не работает в портретном режиме на iOS?

Я пытаюсь настроить вручную splash-image на всех устройствах. Я делаю это, проверяя orientation (сенсорных устройств) или screen width vs. screen height (нет касания) и установите url соответственно.

затем я добавляю это правило CSS через Javascript:

С x быть изображением, котор нужно нагрузить в зависимости от ориентации и размера экрана.

моя проблема в том, что это отлично работает в landscape режим, но на моем iPad в portrait режим, загружается правильное изображение (различаются в зависимости от портрет / пейзаж), но он не расширен до полноэкранного размера.

вопрос:
Могу ли я не использовать CSS background-size на iOS в портретном режиме?

Спасибо за помощь!

EDIT:
Просто попробовал на своем смартфоне Android. Отлично работает. Не имеет смысла, почему он не работает на iPad.

5 ответов

при проверке ориентации обратите внимание на эти моменты из документа apple —

Обеспечить Запуск Изображения :

iPhone-только приложения может иметь только одно изображение для запуска. Он должен быть в формате PNG и измерять 320 x 480 пикселей. Имя образа запуска файл по умолчанию.формат PNG.

iPad-только приложения: создайте изображение запуска для каждой поддерживаемой ориентации в формате PNG. Каждый изображение запуска должно быть 1024 x 748 пикселей (для ландшафта) или 768 X 1004 пикселей (для портрета).

универсальные приложения: включить изображения запуска для iPhone и iPad.

Обновление Информации.параметры файла plist укажите значения для UISupportedInterfaceOrientations и UIInterfaceOrientation

не все браузеры распознают ключевое слово cover для background-size, и в результате просто игнорируйте его.

таким образом, мы можем преодолеть это ограничение установка размера фона до 100% ширины или высоты, в зависимости от ориентации. Мы можем нацелить текущую ориентацию (а также устройство iOS, используя ширину устройства). С этими двумя пунктами, я думаю, вы можете использовать CSS background-size:cover на iOS в портретном режиме

Ok. Вот как это работает (благодаря @iMeMyself):

поэтому сначала установите его, чтобы 100% , потом cover . Таким образом, весь браузер, который не может cover получить 100% стоимости, в то время как те, которые могут получить 100% заменяется крышка.

здесь код

он фиксирует фоновые изображения для ipad

просто введите размеры в соответствии с вашими размерами изображения

насколько мне известно, этот метод работает на всех устройствах IOS. В зависимости от других элементов страницы (заголовка и т. д.) Вам может потребоваться настроить Z-индекс для &:Перед элементом psuedo.

по данным проектирование веб-сайтов для iPhone X iOS 11 вводит новое расширение для существующего viewport мета-тег называется viewport-fit , который обеспечивает контроль над поведением вставки. Значение по умолчанию — auto , который не будет охватывать весь экран.

чтобы отключить поведение вставки по умолчанию и заставить страницу выложить в полный размер экрана, вы можете установить viewport-fit to cover как показано здесь:

без этой настройки существующие методы, используемые для заставок и полноразмерных изображений героев, могут отображаться не так, как ожидалось на iPhone X или других соответствующих устройствах iOS.

Источник

why does CSS background-size: cover not work in portrait mode on iOS?

I’m trying to set up a manualy splash-image across devices. I’m doing so by checking for orientation (touch devices) or screen width vs. screen height (none touch) and set a url accordingly.

Then I add this CSS rule via Javascript:

With x being the image to be loaded depending on orientation and screen size.

My problem is this works fine in landscape mode, but on my iPad in portrait mode, the correct image is loaded (differ depending on portrait/landscape), BUT it is not expanded to fullscreen size.

Question:
Can I not use CSS background-size on iOS in portrait-mode?

Thanks for help!

EDIT:
Just tried on my Android Smartphone. Works fine there. Makes no sense, why it doesn’t work on iPad.

5 Answers 5

Ok. Here is how it’s working (Thanks to @iMeMyself):

So first set it to 100% , then to cover . This way all browser that cannot cover get the 100% value, while the ones that can get the 100% overwritten by cover.

While checking orientation please take note of these points from apple document —

Provide Launch Images :

iPhone-only applications may only have one launch image. It should be in PNG format and measure 320 x 480 pixels. Name your launch image file Default.png.

iPad-only applications: Create a launch image for each supported orientation in the PNG format. Each launch image must be 1024 x 748 pixels (for landscape) or 768 x 1004 pixels (for portrait).

Universal applications: Include launch images for both iPhone and iPad.

Update Your Info.plist Settings Specify values for the UISupportedInterfaceOrientations and UIInterfaceOrientation

Not all browsers recognize the cover keyword for background-size, and as a result, simply ignore it.

So we can overcome that limitation by setting the background-size to 100% width or height, depending on the orientation. We can target the current orientation (as well as the iOS device, using device-width). With these two points I think you can use CSS background-size:cover on iOS in portrait-mode

Here are some other resources I also came across while looking for a solution: Flexible scalable background images, full scalable background images, perfect scalable background images, and this discussion.

Источник

Как исправить проблему с отображения фона лендинга на ios?

Всем привет) спасибо огромное решили уделить время моему вопросу! 🙂

Очень сильно новичок в деле web dev 🙂

Загрузил шаблон на ftp чтобы протестировать его
сайт на myjino.ru

Все работает ровно, с разных реальных устройств, виртуальных машин.

но при открытии сайта с ipad mini и iphone 6s возникает следующий баг

xcode не использовал, открывал сайт с указанных устройств.

Подскажите, пожалуйста, как исправить отображение фона?
очень не хочется ставить виртуальный ios:(

Заранее благодарю за Ваши ценные указания!

• Вопрос задан более трёх лет назад
• 4049 просмотров

Очень старая проблема и не только на iOS, а на большинстве браузеров для мобильных устройств в принципе. Суть в том, что использование background-attachment: fixed; сказывается на производительности и он тупо отключён в мобильных устройствах. Может однажды всё будет работать, но пока так. После нескольких лет поиска решения я пришёл к следующим выводам.

Если эффект крайне необходим, вы можете использовать технологию параллакса (есть бесплатные плагины), когда позиционирование элемента изменяется динамически во время прокрутки, либо использовать отдельный пустой div, где вместо background-attachment: fixed; ставите position: fixed; этому пустому блоку и регулируете всё через z-index.

Если эффект не так важен и вы согласны пойти на компромисс с мобильными, то можете воспользоваться моим личным вариантом. На компьютерах эффект работает как должен, а на мобильных — фон просто растягивается по высоте блока и двигается вместе со страницей.

HTML
Тут ваша разметка шапки, но с разложенными по классам свойствами CSS.

CSS
Из своего основного класса убираете всё, что касается фона, кроме картинки. Естественно, если вам там ещё что-то нужно, вроде высоты, флоатов и тд., сами решите. Теперь добавляете два класса, которые пойдут как фреймворк и могут использоваться многократно. Один растягивает картинку (центрует и без повторений), другой делает тот самый эффект fixed.

JS
Добавляете этот код в шаблон или в файл скриптов. Если ваш сайт открывают на мобильных устройствах, скрипт находит все блоки по классу bg-cover и убирает из них класс bg-fixed, если он есть. Фоновая картинка просто будет скролиться со всем остальным.

Источник

background-size: cover not working on iOS

This is my code:

It’s working on desktop, iPad and Android mobile:

On Chrome and Safari on iPhone, the background is too big:

7 Answers 7

This happens, particularly on iOS, when you have background-attachment:fixed . On mobile, I usually put background-attachment:scroll inside of a @media query.

As @RyanKimber pointed out, fixed attached images use the whole size. On mobile this can get really tall which blows your image out. Setting the attachment back to scroll allows your cover image to stretch within its own container.

Elaborating on Ryan’s answer, without adding any new html node or using @media queries, using only one css.

If you want to keep a cover sized fixed background on all the devices including iOS, without adding a new node, then the trick is to do the fixed positioning on the element (body) itself and not the background, since a fixed background and cover sizing messes up iOS.

It works in production like a charm on iOS as well: https://www.doklist.com/

This code won’t work, since iOS uses the hight of the document and not the viewport :

Now this is the magic, the body:after is fixed, and not the background:

I could have used the body itself, with «position:fixed;overflow-y:scroll», but I didn’t want to mess with the positioning of the body and my overall layout.

So doing this on the body:after is a very easy fix. I have tested the solution on Mac, and iOS with firefox, safari, chrome.

Источник