iPad css ориентация

Question

Я хочу проверить ориентацию с помощью css для ipad. Это файл css, который я использую

@media only screen and (device-width:768px) and(orientation:portrait) {
  body { background: green; }
}


@media only screen and (device-width:768px) and(orientation:landscape) {
  body { background: red; }
} 

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

<link rel="stylesheet" type="text/css" href="iPad.css" />"

Answer 1

Это то, что я использую для вызова таблиц стилей с альбомной и портретной таблицами стилей:

<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/portrait.css">

Я также нашел эту ссылку для вас, что очень полезно:

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

Answer 2

Я решил проблему с помощью этого CSS.

   @media only screen and (device-width:768px) and(orientation:portrait) {
      body { background: green; }
    }


    @media only screen and (device-width:768px) and(orientation:landscape) {
      body { background: red; }
    }