CSS в мобильном приложении - PullRequest
Новая
       9

CSS в мобильном приложении

1 голос
/ 12 сентября 2010

CSS для моего веб-приложения полностью смещается при повороте мобильного устройства в горизонтальное положение (целевые устройства - iphone и android).Я попытался использовать решение javascript, объясненное здесь , чтобы заставить мое приложение переключаться между файлом Portrait.css и файлом landscape.css при изменении ориентации, но это все равно не сработало.Он даже испортил файл Portrait.css, когда они оба были опубликованы на живом сервере (хотя он работал на моем локальном компьютере).

URL-адрес приложения: http://mobile.geekstats.com/

Кто-нибудьзнаете, как я могу исправить пейзаж CSS?Спасибо!

1 Ответ

1 голос
/ 14 января 2011

Используйте CSS Media Queries для обновления вашего дизайна

В настоящее время iPhone не поддерживает ориентацию (Thx @vava), поэтому используйте медиазапросы для ширины ниже

Ориентационные запросы:

http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) {
  h1 {
    color: red;
  }
}
@media all and (orientation:landscape) {
  h1 {
    color: blue;
  }
}

Запросы ширины: 

/* Portrait */
@media only screen and (max-width: 320px) {
  h1 {
    color: red;
  }
}
/* Landscape */
@media only screen and (min-width: 321px) {
  h1 {
    color: blue;
  }
}

В примерах http://lessframework.com приведены примеры разработки медиазапросов на основе ширины.

Существует много других опций медиазапроса, предназначенных для определенных атрибутов сеанса просмотра:
http://www.w3.org/TR/css3-mediaqueries/#contents

...