Android игнорирует максимальный масштаб при использовании метатега видового экрана фиксированной ширины - PullRequest
Новая
       23

Android игнорирует максимальный масштаб при использовании метатега видового экрана фиксированной ширины

7 голосов
/ 29 ноября 2011

У меня есть веб-страница фиксированной ширины (640 пикселей в ширину).Я бы хотел, чтобы эта страница сократилась до ширины мобильного устройства.Однако, если собственная ширина устройства превышает 640 пикселей, я не хочу, чтобы он растягивался.Кажется достаточно простым: 

<meta name="viewport" content="width=640, maximum-scale=1.0" />

Это работает, как и ожидалось, в iPad / iPhone.Однако на планшете Android (например, в альбомном режиме) содержимое масштабируется до размера дисплея.Другими словами, Android просто игнорирует Maximum-Scale = 1.Вы можете увидеть пример страницы с проблемой здесь .Ради полноты здесь приведен источник: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test Viewport</title>
    <meta name="viewport" content="width=640, maximum-scale=1.0" />
    <style>
      div.bar {
        position: absolute;
        width: 636px;
        height: 50px;
        background-color: yellow;
        border: 2px solid black;
        left: 50%;
        margin-left: -320px;
      }
    </style>
  </head>
  <body>
    <div class="bar">
    </div>
  </body>
</html>

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

Два примечания:

  • Это не target-densitydpiПроблема

  • Установка ширины области просмотра равной ширине устройства в этом случае бесполезна, поскольку ширина контента фиксирована и превышает (например) ширину портретного устройства телефона.Если я установлю width = device-width, страница не будет автоматически уменьшена до размера телефона.

Большое спасибо.

Ответы [ 2 ]

10 голосов
/ 30 ноября 2011

После того, как я снова ударился головой о стол, я нашел решение:

К сожалению, похоже, что iOS и Android просто ведут себя по-разному (Android явно не делает то, что говорит спецификация, игнорируя максимальный масштаб). Решение заключается в том, чтобы специализироваться на основе разрешения с использованием JavaScript:

  • Если ширина экрана (см. Примечание ниже) больше или равна фиксированной ширине страницы (в моем примере 640), тогда установите ширину содержимого мета-тега области просмотра равной ширине экрана

  • В противном случае установите ширину содержимого метатега области просмотра на фиксированную ширину страницы (640)

Presto. Хромо, что требует специализации JavaScript, но такова жизнь.

Обратите внимание, что Javascript screen.width на iPad / iPhone некорректен, если устройство находится в альбомном режиме (iPad по-прежнему отображает ширину портретной ориентации вместо ширины альбомной ориентации, в отличие от Android, которая правильно понимает это дело!). Поэтому вам нужно проверить window.orientation на iPad / iPhone и использовать screen.height вместо screen.width , если вы находитесь в альбомной ориентации.

0 голосов
/ 01 декабря 2011

Я бы предпочел использовать 

width=640, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi

Вместо просто свойства Max scale ... Свойство target-densityDpi для Android, может быть, оно может решить вашу проблему.

...