Можно ли изменить вид веб-приложения в соответствии с ориентацией планшета?

Question

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

Что я заметил, так это то, что веб-приложение не полностью использует пространство на планшете (iPad), а макет выглядит странным. Есть ли способ, которым я могу изменить дизайн и макет в зависимости от ориентации.

Буду признателен за помощь в этом.

Answer 1

нет необходимости писать window.onresize, вы можете сделать это просто с помощью CSS. Вы должны написать на html-странице

<meta name="viewport" content = "user-scalable=no, width=1024" />'
<link rel="stylesheet" media="all" href="stylesheet/ipad.css" type="text/css" />;

и написать свой CSS для ipad. Для получения дополнительной информации вы должны увидеть эти ссылки http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes, http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm, http://thomasmaier.me/blog/2010/03/04/howto-css-for-the-ipad/

Answer 2

Ознакомьтесь с этой прекрасной статьей о Отзывчивом веб-дизайне из A List Apart .

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

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

и вы даже можете использовать медиа-запрос прямо в вашем CSS, например:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Затем вы можете настроить одну страницу с макетом, который автоматически подстраивается под доступную ширину.

---

Я попробовал это на моем собственном сайте; для @media screen and (max-width: 600px) я переключаюсь с двухколоночного макета на один. Это работает, когда я изменяю размер окна в Chrome, но на моем Droid Incredible я все еще получаю две колонки. У меня не было времени разобраться, должен ли я использовать max-device-width или, возможно, браузер Android не поддерживает эту функцию. Если это последнее, я уверен, что Apple достаточно со временем, когда это должно сработать для вас.

Удачи!

Answer 3

Я не эксперт по планшетам, но похоже, что вы можете изменить свой макет на основе window.onresize.