Медиа-запросы в CSS

Question

Я пытаюсь применить CSS для планшетов. Планшеты имеют большие дисплеи, но плотность пикселей не такая высокая, как, например, на iPhone 4, Samsung Galaxy Nexus и т. Д.

<link href="css/mobile-tablet.css" media="all and (min-device-width: 600px)" rel="stylesheet" type="text/css" />

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

Answer 1

Вы можете настроить таргетинг на устройства с высокой плотностью пикселей с помощью запроса min-device-pixel-ratio, например:

<link rel='stylesheet' href='highres.css' media='all and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 600px), all and (min-device-pixel-ratio: 2) and (min-device-width: 600px)' />

Это нацелено на дисплеи с высоким разрешением шириной более 600 пикселей

Answer 2

Вы можете попробовать эти медиа-запросы, которые могут вам помочь.

<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />

Используйте диапазон ширины устройства, и вы можете легко настроить таргетинг на устройства. Я знаю, что существует множество устройств для таргетинга, но в целом вы ориентируетесь на устройства таким образом.