Настройка фиксированной ширины для мобильного веб-сайта не корректируется при переходе на альбомную ориентацию на Android (jQuery Mobile, HTML5) - PullRequest
Новая
       37

Настройка фиксированной ширины для мобильного веб-сайта не корректируется при переходе на альбомную ориентацию на Android (jQuery Mobile, HTML5)

0 голосов
/ 03 марта 2012

Мета-тег области просмотра: 

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">

Вот тело: 

<body>
  <div data-role="page" id="Index">
    <h2>Section</h2>

    <h4 id="Article1">Article1</h4>
    <h4 id="Article2">Article2</h4>
    <h4 id="Article3">Article3</h4>

    <div id="Content">
      <div id="TableDiv">
        <table>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
          </tr>
          <tr>
            <td>Value 1</td>
            <td>Value 2</td>
          </tr>
          <tr>
            <td>Value 3</td>
            <td>Value 4</td>
          </tr>
        </table>
      </div>
    </div>

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/200px-Rotating_earth_(large).gif"/>
  </div>
</body>

Я хочу, чтобы у пользователя была возможность масштабирования. Тем не менее, масштабирование может свернуть содержимое, так как я использую проценты для CSS. Чтобы содержимое оставалось статичным, с масштабированием я установил ширину страницы в clientWidth в JavaScript: 

$(document).ready(function() {
  $("#Index").css("width", document.documentElement.clientWidth);
});

Требования:

  • Увеличение (сжатие) включено
  • Контент не должен разрушаться при масштабировании
  • Ширина содержимого реагирует соответствующим образом при изменении ориентации экрана

Ширина корректируется соответствующим образом при переключении ориентации на iOS. Однако в ОС Android ширина остается фиксированной и не изменяется в зависимости от направления ориентации.

Если я не установлю ширину, ориентация в порядке, но содержимое будет разрушаться при увеличении. Могу ли я использовать событие directionalchange для регулировки ширины или это лучший метод для удовлетворения всех вышеперечисленных требований?

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

Обновление

Позвольте мне задать этот вопрос по-другому: в метатеге «viewport» ширина - это ширина устройства, и я разрешаю пользователю масштабировать. Я хочу сохранить видовой экран макета фиксированным (см. Эту ссылку для объяснения - http://www.quirksmode.org/mobile/viewports2.html). То есть, когда пользователь увеличивает масштаб, я не хочу, чтобы содержимое передавалось. Существует ли какое-либо решение CSS или медиазапроса Можно ли использовать это, что позволило бы установить содержимое на ширину устройства как в портретном, так и в ориентационном режимах?

Спасибо.

...