Ответ 1
Короткий ответ: вы можете проверить пользовательский агент и установить метатег с помощью JavaScript.
Долгий ответ: не делайте этого. С тех пор я тоже очень смутился, когда начал заниматься мобильными телефонами. IPhone 4 (и другие устройства с высоким разрешением) фактически отображают ту же ширину страницы, что и их предшественники. Вероятно, это связано с тем, что сайты повсюду выглядели бы совсем маленькими и, вероятно, перепутались, если бы сделали иначе. Однако есть разница. Телефоны с высоким разрешением просто отображают все с более высоким разрешением (но одинаковые размеры).
Это не имеет значения для таких вещей, как цвет текста и фона, но вы обнаружите, что изображения не выглядят четкими на iPhone - это потому, что они изменяются. То, что я делаю, - это удвоить разрешение на изображениях, придать им фиксированный размер и высоту их размеру "не высокого уровня" и использовать -webkit-background-size: 100% 100%;. Таким образом, старые устройства отображают его как обычно, а устройства с высоким разрешением выглядят четкими и приятными. Предостережение заключается в том, что это делает размер файла изображения более крупным.
Для получения дополнительной информации о том, почему пиксель не всегда является пикселем, см. эту ссылку: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Кроме того, если вы хотите настроить таргетинг на устройства с высоким разрешением специально с помощью CSS. Вы можете использовать медиа-запрос:
@media screen and (-webkit-device-pixel-ratio: 2) {
body{
background-color: red;
}
}