css media query для обработки новых мобильных телефонов с высоким разрешением, игнорируя при этом планшеты

Согласно моим исследованиям; новые смартфоны с портретным разрешением до 800 пикселей
планшеты с минимальным портретным разрешением 600 пикселей

Теперь я пытаюсь использовать медиа-запросы для рендеринга мобильных css на портативные устройства, поддерживающие разрешение до 800 пикселей, но проблема, с которой я сталкиваюсь, заключается в том, что старые планшеты, такие как ipad1 с портретным разрешением 768 пикселей, также отображают мобильные css.

Мне нужно убедиться, что планшеты + настольные ПК от 600 пикселей и выше отображают широкоэкранный CSS, в то время как мобильные телефоны с максимальным портретным разрешением 800 пикселей отображают мобильный CSS.

Как я могу это сделать, несмотря на пересечение ширины мобильного телефона и планшета?

это моя текущая установка...

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,
user-scalable=0,width=device-width" />
<link rel="stylesheet" media="screen and (max-device-width: 800px)" 
href="/css/mobile.css" />
<link rel="stylesheet" media="screen and (min-device-width: 600px)"
href="/css/widescreen.css" />

заранее спасибо Омар.

ОБНОВИТЬ:

следующий медиа-запрос 2 в 1, кажется, соответствует моей цели. Я тестировал на Samsung Galaxy S2, Google Nexus и iPhone4, и, похоже, все работает нормально. нужно проверить планшеты.

<link rel="stylesheet" type="text/css" media='only screen and (max-width:480px) and    
(orientation: portrait), only screen and (max-width:800px) and (orientation:  
landscape)' href="mobile.css" />

mobile css media-queries
person Omar999    schedule 24.05.2012    source источник
comment
Это становится все более раздражающим (сам я как раз собирался опубликовать вопрос). Есть телефоны с разрешением 1280x720 и планшеты с разрешением 1920x1080. Ваша идея портрета/пейзажа не будет работать для таких разрешений. Я не хочу, чтобы мой макет рабочего стола (предназначенный для 20+ мониторов) отображался таким образом на 10-м планшете. Я знаю, что есть запросы dpi, но мы будем проектировать на уровне устройства (в этот момент). Может быть, мы можем начать использовать ширину: 2 дюйма. Хе-хе-хе...   -  person doubleJ    schedule 30.06.2012
comment
вы также можете указать media=handheld и bla вместо screen.   -  person Simon    schedule 02.07.2012
comment
Я удалил свои предыдущие комментарии, так как нашел новую информацию...Согласно W3, 1px = 0,75pt и 1pt = 1/72in, поэтому попытка использовать дюймы для преодоления проблемы устройства с высоким разрешением не работает (он просто преобразует px в in). Я обнаружил это, когда мой 12.1, 1280x800px, ноутбук показал стили из медиа-запроса 12-14, а мой 11.6, 1366x768px, ноутбук показал стили из 14+ медиа-запроса. На этой странице W3 есть блок, который должен быть 1 дюйм в высоту, но это около 3/4 дюйма, на моем 11,6.   -  person doubleJ    schedule 03.07.2012

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что философия, на которой вы пытаетесь основывать свои медиа-запросы, ошибочна с самого начала: как часто цитирует Итан («изобретатель» метода), точки останова должны основываться не на размерах экрана/устройства, а на том, как контент подходит. естественно на страницу. Сначала начните создавать мобильные устройства с базовыми стилями типографики и цвета, а затем, по мере роста экрана, используйте min-width:500px (например), чтобы добавить макет/колонки, и продолжайте, пока не решите, что сможете воспользоваться доступным пространством в 22-дюймовые разрешения для рабочего стола, такие как 1900 пикселей и выше. Я сделал это для своего блога ( http://www.gplus.gr/blog ) - разработан только с Chrome на рабочем столе, и когда я пошел проверять веб-сайт на других устройствах, он работал как шарм: Android 2.x, Android 4.x, Kindle, iPad и т. д. и т. д.

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

person George Katsanos    schedule 03.07.2012
comment
Эта философия начинает разваливаться, если учесть ограничения данных мобильных устройств (обычно следует избегать потокового видео через 3G, 4G и т. д.). - person TylerH; 16.10.2014
comment
Поскольку у всех есть планы на 3 гигабайта в месяц, я думаю, что ограничения данных уходят в прошлое, и ваш комментарий на самом деле не отменяет философии. Вам просто нужно использовать какой-то дополнительный уровень, например, обнаружение функций, вы не можете автоматически воспроизводить свои видео, и я полагаю, что мобильные браузеры уже справляются с этим за вас. - person George Katsanos; 18.10.2014
comment
Отключение автозапуска — это не то же самое, что не загружать видеоконтент. Кроме того, вы не можете предположить, что у людей будет достаточно большой тарифный план (кстати, 2 или 3 ГБ в месяц недостаточно для регулярной потоковой передачи видео), чтобы справиться с работой в Интернете на высшем уровне. - person TylerH; 18.10.2014
comment
Почему вы не хотите отображать видеоконтент? Я видел множество применений видео html5 на веб-сайтах, включая мобильные устройства. С каких это пор мы вернулись к сниффингу пользовательских агентов и таким взломам? Это 2008 год? - person George Katsanos; 18.10.2014