Блог

Я пытаюсь создать мобильный веб-сайт, и пока он отлично смотрится в портретном режиме, а когда я перехожу к landscape, он настраивается и тоже выглядит нормально. как только я возвращаюсь к портрету, ширина остается такой же, как и в альбомной ориентации, а макет искажается. Это мета-теги, которые у меня есть в верхней части моей страницы.

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=1" />
  

кроме того, мои ширины css основаны на процентах, а для оболочки тела установлена ширина 100%.

Может кто-нибудь, по крайней мере, указать мне правильное направление здесь. Нужен ли мне какой-нибудь необычный медиа-запрос javascript или css? я предоставлю код, если это необходимо. Кроме того, он ведет себя непоследовательно на разных устройствах. Это происходит в основном на Android…

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

Проблема заключается в определении ширины в мета-теге области просмотра. Когда значение width установлено в device-width значение width , доступной шириной всегда будет портретная ширина устройства, независимо от ориентации. Это кажется запутанным, но device-width означает не «текущую доступную горизонтальную область», а буквально стандартную ширину экрана устройства.

Когда ширина не указана, Mobile Safari фактически присваивает device-height ширину в альбомной ориентации. Опять же, это может показаться нелогичным, но мы говорим о стандартной ширине и высоте спецификации в обычной книжной ориентации.

Телефоны Android могут отображать или не отображать аналогичное поведение. Я так или иначе не смог найти никакого подтверждения. Однако, к сожалению, ширина должна быть указана как ширина устройства на Android, чтобы она вообще работала.

В результате, ваш лучший выбор, вероятно, будет поддерживать поведение с медиа-запросами. Вы можете определить ориентацию и ширину устройства и применить стили на основе этого. Например:

 @media all and (device-width: 320) and (orientation: portrait) { ... }
@media all and (device-width: 480) and (orientation: landscape) { ... }