Отзывчивое изображение не собирается на 100% ширину в Safari (отлично в Chrome)

Question

На моем веб-сайте я использую медиа-запросы для изменения размеров элементов на основе размера устройства. Это прекрасно работает, и элементы прекрасно изменяются в любом браузере (Chrome, Safari, что угодно).

У меня есть одна большая проблема, хотя и у меня есть логотип img, который начинается с автоматической ширины, а затем, когда на мобильном устройстве (мультимедийный запрос работает нормально, он реагирует и применяет стили), он должен идти до 100% ширины, поэтому он занимает всю линию. Это отлично работает в Chrome и Firefox, но Safari не работает.

Использование инструментов Safari dev Я вижу, что на самом деле он применяет 100% ширину к элементу, но на самом деле он не вычисляет 100% ширину окна просмотра, а некоторое другое число (не уверен, откуда он).

По существу, проблема заключается в том, что в Safari (и только в Safari), когда я пытаюсь реагировать на 100% -ную ширину, элементы не работают должным образом. Он применяется, но на самом деле не является полной шириной окна просмотра.

У меня есть метатег для просмотра и т. Д., Но это происходит на рабочем столе и мобильном Safari, поэтому я сомневаюсь, что это так.

Любые идеи?

поделюсь код:

.Logo 
 
    width: 100% 
 
    margin-top: 3em 
 
    margin-bottom: 2em 
 
    display: block 
 
    text-align: center 
 

 
    @media (min-width: mobile-nav-break) 
 
    margin-bottom: 3em 
 
    text-align: left 
 
    margin: 0 
 
    flex: 1 
 

 
    img 
 
    height: 3em

То есть CSS моего логотипа. Это в Stylus, но это делает то, что вы ожидаете от него. Он выглядит отлично в Chrome в любом размере (также ниже точки останова).

«Повторяющийся вопрос» не является дубликатом. В моем случае логотип не должен автоматически масштабироваться, только его контейнер должен идти до 100%.

Answer 1

Добавьте этот метатег в голову. мета имя окна просмотра:

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