Не масштабируемый веб-просмотр, который работает как на iPhone, так и на iPhone4.

Question

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

Мои существующие веб-просмотры, рассчитанные на 320x480, похоже, хорошо масштабируются (например, четкий текст и радиус границы), хотя изображения в симуляторе iPhone4 имеют половину разрешения. Как имитировать поведение при загрузке исходного изображения, когда изображение или его версия с двойным разрешением выбираются автоматически с помощью HTML, CSS или JS? (надеюсь, не JS)

В настоящее время я использую объявление в области просмотра следующим образом:

<meta content='initial-scale=0.5; maximum-scale=1.0; minimum-scale=0.5; user-scalable=0;' name='viewport' /> 

Это уменьшает масштаб изображения, и пиксели изображения составляют 1: 1 с пикселями дисплея, но также уменьшают все остальное. И, конечно, делает его крошечным на меньшем дисплее iPhone.

У меня такое ощущение, что это как-то связано с медиа-запросом размером с видовой экран?

Answer 1

Это загрузит определенную таблицу стилей для iPhone 4:

<link
    rel="stylesheet" type="text/css" href="/css/style.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>

Answer 2

Я наткнулся на это на днях: http://aralbalkan.com/3331

Это загрузит таблицу стилей iPhone 4

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>

Тогда в вашей таблице стилей с низким разрешением волшебный ход состоит в том, чтобы установить для свойства размера фона размер изображения с низким разрешением.

.demoImage
{
    background-image: url(../images/my-image-64.png);
    background-size: 64px 64px;
    background-repeat: no-repeat;
}

Теперь в retina.css просто покажите версию с двойным разрешением

.demoImage
{
    background-image: url(../images/my-image-128.png);
}

Теперь фоновое изображение css будет отображать изображение 128x128, как если бы оно было 64 пикселями css, обеспечивая пиксель изображения 1: 1 для отображения изображения пикселей на iPhone 4.

Answer 3

A CSS медиазапрос должен работать:

@media only screen and (min-resolution: 300dpi) { ... }

Кроме того, A List Apart предлагает методику обслуживания изображений с высоким разрешением .Эта статья в основном о стилях печати, но применима и здесь.

Answer 4

У меня такая же проблема.У меня нет времени работать над этим, но моя идея состоит в том, чтобы создать графику с более высоким разрешением пикселей на дюйм и использовать ее как для iphone 3g (s), так и для iphone 4.

Не уверен, что так и будетработатьНо стоит выстрел.