Фоновая обложка не поддерживает соотношение сторон, Android-хром

Question

На настольных компьютерах iPad изображение на заднем плане сохраняет свое соотношение сторон, когда элемент имеет background-size: cover, но на моем телефоне Android (хром) изображение выглядит как width:100%;height:100%,

Вы можете увидеть это в действии здесь.

Вот скриншот с моего телефона

// Markup
<div class="wrapper">
  <div class="content">
...

// Style
html, body {
  height: 100%
}

.wrapper {
  position: relative;
  height: 100%;
  background-image: url(...);
  background-size: cover;
  ..vendor prefixes..
}

Answer 1

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

TL; DR
Не используйте изображения большого размера, мобильные устройства не любят их, используйте фотографии шириной до 2000 пикселей.

---

Немного больше деталей

Проще говоря, мобильные устройства не могут обрабатывать изображения большого размера, в зависимости от модели и ОС. Результаты могут отличаться: некоторые могут просто сломаться, другие отобразят пустое изображение или искажения, подобные приведенному в этом вопросе, а иногда даже вернут ошибку 404! (был там, сделал это).

Я нашел информацию по этому вопросу во многих местах здесь, в SO и в других местах в Интернете, хорошая статья с хорошим инструментом для расчета размера изображения:
http://www.williammalone.com/articles/html5-javascript-ios-maximum-image-size/.

По моим тестам идеальный размер изображения не должен превышать 2000 пикселей, в основном для поддержки самой большой (и самой старой) части мобильных устройств, но рекомендуется тестировать в зависимости от ваших потребностей.

Answer 2

Иногда это помогает определить область просмотра для вашего HTML-документа:

html{
  height:100%;
  min-height:100%;
  width: 100%;
  min-width: 100%;
}
body{
  min-height:100%;
  min-width: 100%;
}

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

Далее вы можете использовать media queries создать обходной путь, потому что Chrome на вашем телефоне не обрабатывает cover приписать так, как должно:

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
    .wrapper {
      background-image: url(...);
      background-size: auto 100%;
    }
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
   .wrapper {
      background-image: url(...);
      background-size: 100% auto;
    }
}

Это довольно просто, но делает солидную и хорошую работу. Если вы хотите ограничить доступ к этому CSS только для небольших устройств, вы можете расширить медиа-запрос, например:

@media screen and (orientation:landscape) and (max-width: 400px) { add css }

Надеюсь это поможет,

С наилучшими пожеланиями, Мариан.