Как я могу исправить несовместимость CSS между мобильным эмулятором для Chrome на рабочем столе и реальным Chrome на мобильном?

Question

Когда я использую свой сайт в Chrome для настольных компьютеров, эмулируя мобильные устройства, макет выглядит так, как я хочу:

Ссылка на изображение

Однако, когда яна самом деле мой мобильный веб-сайт (Chrome на Android) выглядит не так:

Ссылка на изображение

Я не уверен, что является причиной проблемы, потому что этоиспользуя один и тот же CSS для обоих.

В моем html объявлен элемент div с классом header-image, а в моем файле scss:

.header-image {
  background: url('/assets/images/31163086090_fdac6a25c4_o.jpg') no-repeat fixed center;
  background-size: cover;
  background-position: 50% -30vh;
  height: 60vh;
}

Причина, по которой я вставляю изображение таким образом, заключается в том, что я хочу, чтобы оно было неподвижным при прокрутке вниз.Все работает именно так, как я хочу на Chrome для настольных компьютеров.Есть предложения?

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

Answer 1

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

Эта тема была затронута при переполнении стека, когда человек хотел, чтобы изображение было согласованным между компьютером и мобильными браузерами Chrome.Посмотрите на этот ответ ЗДЕСЬ .