iPad4: media queries

[Светлана Г.]

Всем здравствуйте!

 

Страница

 

Вот такая проблема.

 

У заказчика iPad4. Она хочет, чтобы сайт на ее устройстве в альбомной ориентации отображался как для desktop. Но не могу это никак настроить!

Эмуляторы отрабатывают нормально, а реальные iPad  выбирают мобильный вариант.

 

Не срабатывают оба таких  media-queries:

@media only screen and (max-width: 960px) {}

@media only screen and (max-width: 960px),

(min-device-width: 768px) and (max-device-width: 1024px) {}

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (orientation: portrait) 

  and (-webkit-min-device-pixel-ratio: 1), (max-width: 960px) {

 

Как решить данную задачу?

 

[rus]

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

@media all and (orientation:portrait) {

    /* стили для портрета */

}

@media all and (orientation:landscape) {

    /* стили для пейзажа */

}

[Светлана Г.]

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

@media all and (orientation:portrait) {    /* стили для портрета */}@media all and (orientation:landscape) {    /* стили для пейзажа */}

А нельзя обойтись медиа-запросом? Переписывать отдельно стили для каждой ориентации - это очень трудоемкое дело. Да и мне это нужно только для iPad.

[antonKar]

Может наоборот в вертикальной ориентации?

 

Поставьте у вьюпорта width=1000

[Светлана Г.]

Может наоборот в вертикальной ориентации?

 

Поставьте у вьюпорта width=1000

Мне нужно только конкретно для этой таблицы.

[forest_moss]

теоретически можно еще aspect-ratio добавить

Edited April 10, 2015 by forest_moss

[antonKar]

отслеживать orientationchange, определять режим отображения, у тега html ставить соответствующий data-атрибут (landscape или portrait) и в стилях уже, основываясь на значении атрибута, ставить что вам надо

 

также отдельно можно загуглить определение ipad через javascript и также ставить для html дополнительный класс (например "_ipad")

[Светлана Г.]

отслеживать orientationchange, определять режим отображения, у тега html ставить соответствующий data-атрибут (landscape или portrait) и в стилях уже, основываясь на значении атрибута, ставить что вам надо

 

также отдельно можно загуглить определение ipad через javascript и также ставить для html дополнительный класс (например "_ipad")

Почему так сложно?

[antonKar]

Почему так сложно?

 

Это мобильные устройства, у них всё через жопу (особенно у Chrome на iOS).

 

Я уже давно всё вынес в отдельные методы, и если проект должен работать на мобильных устройствах, то все эти landcscape, no-mobile или mobile, _iPad, _AndroisOS и т.д. сами автоматически расставляются при генерации страницы, дальше работаю только с классами и data-атрибутами в css.