Как в медиазапросе отличить монитор с низким разрешением от смартфона?

Question

[evgeniybel]

Подключаю с помощью тега link разные файлы css в зависимости от разрешения, используя медиа-запросы:

<link rel="stylesheet" media="(min-width: 1910px)" href="/common/bp_res1.css" type="text/css">
<link rel="stylesheet" media="(max-width: 1909px) and (min-width: 1590px)" href="/common/bp_res2.css" type="text/css">
<link rel="stylesheet" media="(max-width: 1589px)" href="/common/bp_res3.css" type="text/css">

Вопрос в том, как в медиазапросе определить, что сайт просматривают с устройства с маленьким экраном.
Определение с помощью handheld больше не работает, если же проверять размер окна, современные смартфоны
выдают большие цифры (в районе 1000 пикселей). Соотвественно, не получается отличить монитор с низким
разрешением от смартфона. При этом запрещать масштабирование нельзя, т.е. нужно, чтоб на смартфоне
влезала вся страница, но было понятно, что это смартфон (в частности, чтобы увеличить шрифт ссылок).

Answer 1

[Ankhena]

если же проверять размер окна, современные смартфоны
выдают большие цифры (в районе 1000 пикселей).

Смотрите не размер экрана, а размер вьюпорта
viewportsizes.com
screensiz.es/phone

Answer 2

[Evgeniy Kvasyuk]

Возможно стоит воспользоваться инструментом вроде modernizr и уже внутри ваших css опираться на классы, которые он выплюнул или попробовать orientation

Answer 3

[Максим Тимофеев]

Можно определить телефон по device-aspect-ratio, так как у телефонов он отличается от мониторов и ноутов.
Да и куча способов есть и статей на тему, например:
www.coolmobmasters.com/uncategorized/1594-8-techni...

Answer 4

[evgeniybel]

Вроде справился, спасибо!

<link rel="stylesheet" href="/common/bp_common.css" type="text/css">
<link rel="stylesheet" media="(min-width: 1910px) and (min-device-width: 601px)" href="/common/bp_res1.css" type="text/css">
<link rel="stylesheet" media="(max-width: 1909px) and (min-width: 1590px) and (min-device-width: 601px)" href="/common/bp_res2.css" type="text/css">
<link rel="stylesheet" media="(max-width: 1589px) and (min-device-width: 601px)" href="/common/bp_res3.css" type="text/css">
<link rel="stylesheet" media="(max-device-width: 600px) and (orientation: landscape)" href="/common/bp_res4.css" type="text/css">
<link rel="stylesheet" media="(max-device-width: 600px) and (orientation: portrait)" href="/common/bp_res5.css" type="text/css">