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

4

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

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

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

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

это мои текущие настройки ...

<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" />
Вы также можете указать с помощью media = & quot; handheld and bla & quot; вместо экрана. Simon
Я удалил свои предыдущие комментарии, когда нашел новую информацию ...According to W3, 1px = 0,75pt и 1pt = 1 / 72in, поэтому попытка использовать дюймы для преодоления проблемы устройства с высоким разрешением не работает (она просто конвертирует px в in). Я узнал об этом, когда мой 12,1 ", 1280x800px, ноутбук показал стили от 12-14". мультимедийный запрос, в то время как на моем ноутбуке размером 11,6 ", 1366x768px ноутбук отображал стили из мультимедийного запроса размером 14 +.This W3 page имеет коробку, которая должна быть 1 дюйм в высоту, но она примерно 3/4 дюйма, на моих 11,6 ". doubleJ
Это становится все более раздражающим (я только собирался отправить вопрос, сам). Есть телефоны с разрешением 1280х720 и планшеты с разрешением 1920х1080. Ваша портретная / альбомная идея не подойдет для таких разрешений. Я не хочу, чтобы макет моего рабочего стола (предназначенный для 20 & quot; + мониторов) отображался таким образом на 10 & quot; таблетки. Я знаю, что существуют запросы dpi, но мы будем проектировать на уровне устройства (на этом этапе). Может быть, мы можем начать использовать & quot; ширину: 2 дюйма & quot ;. Hehehe ... doubleJ

Ваш Ответ

1   ответ
1

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

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы