Краткий ответ: вы можете проверить пользовательский агент и установить метатег с помощью 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;
}
}