Новый iPad уже здесь с iOS 5.1. Я провел обычное исследование, и, мм … новых подробностей вам не дадут. Тем не менее, новый Retina-дисплей iPad запоминает некоторые веб-вещи, о которых мы должны знать при создании веб-приложений для iPad.
Safari на iOS 5 и Safari на iOS 5.1 выглядят совершенно одинаково. Нет новых API, не поддерживаются новые вещи, такая же версия WebKit; только у нас есть изменение версии на User Agent.
Тем не менее, iOS 5.1 является первой версией, поддерживающей iPad с высоким разрешением . Хотя пока нет реальных устройств для тестирования, есть некоторые идеи, которые мы должны помнить при запуске iPhone 4 высокой четкости, и все идет в том же направлении.
Слишком много пикселей
IPad имеет разрешение 2048 х 1536 . Это намного больше пикселей, чем мы используем в Интернете.
Нужно ли менять наши сайты для этого нового разрешения? Ну точно нет.
Во-первых, помните, что больше пикселей не означает больше визуального пространства для использования . Ваш веб-сайт будет отображаться как в iPad 1 и iPad 2 с преимуществом повышения резкости текста, CSS3-эффектов и градиентов.
Мы должны помнить, что с момента появления iPhone 4, а также Android, мобильные браузеры предоставляют виртуальное разрешение веб-разработчикам на основе мета-тега viewport и / или атрибута Pixel Ratio . У iPad 1 и iPad 2 Пиксельное соотношение равно 1. У нового iPad Пиксельное соотношение равно 2. Это значение доступно через JavaScript с помощью окна . webkitPixelRatio или CSS-медиа-запросы с использованием — webkit -device- pixel — ratio.
Если мы определим div в ширину 500 пикселей, он будет действительно шириной 500 пикселей на iPad и 1000 пикселей на новом iPad, если только не определен специальный видовой экран.
Изображения с высоким разрешением
Теперь мы знаем, что у нас не будет проблем с текстом и CSS3-эффектами. Изображения это совсем другая проблема. В основном, новый iPad изменит размер вашего изображения. В конце вы не увидите большой разницы с iPad 1 или iPad 2. Однако, если вы предоставите альтернативу с высоким разрешением, изображение станет более четким. Вы можете предоставить альтернативные изображения, используя атрибут Device Pixel Ratio. В случае CSS3 код должен выглядеть следующим образом:
@media (-webkit-device-pixel-ratio: 2) {
#someContainer {
background-image: url('images-hi/image.png');
}
}
Иконки и изображения запуска
Для значков веб-клипа, которые использует iOS, когда пользователь добавляет наш веб-сайт на главный экран, мы можем оставить текущую иконку iPad -72 × 72 пикселя или предоставить версию с высоким разрешением —
144 × 144 пикселя — используя тот же код :
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-lo.png" /> <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-hi.png" />
Если вы создаете приложение без Chrome, вы можете знать об элементе ссылки apple-touch-startup-image. Официального способа определения различных размеров для этого элемента не существует. Однако уловка, использующая медиа-запросы, работает для доставки альбомной и портретной версий прямо сейчас, так что это возможно и для изображений с высоким разрешением.
Производительность
Подождите, прежде чем искать версии изображений с высоким разрешением. Если мы думаем об этом, нам нужно изображение с четырьмя пикселями. Это огромная разница, и размер изображения будет намного выше. Что это значит? Ваша страница будет намного медленнее. Хорошо, есть версия 4G нового iPad, но это не значит, что разница будет покрыта.
Подумайте дважды о добавленной стоимости при доставке изображений с высоким разрешением .
Создание эффектов и градиентов с использованием CSS3 будет намного быстрее. Тем не менее, большие фоны имеют тенденцию использовать много памяти. К счастью, новый iPad имеет больше памяти и мощности процессора, так что, надеюсь, это не будет проблемой.
Возможно, пришло время начать искать масштабируемое решение, такое как SVG, которое будет использовать преимущества высокого разрешения без ущерба для производительности сети.
Что касается HTML5-игр, нам нужно подождать, пока у вас не появится реальное устройство, но обычно, если вы хотите увеличить частоту кадров, иногда лучше предоставить меньший видовой экран, поэтому игра будет использовать меньше памяти — как эмулятор iPad 2 — и использовать Преобразование CSS3 с аппаратным ускорением мы можем масштабировать, если это необходимо. Это просто мысль и хитрость, которые используются в некоторых играх для Android HTML5 для получения нескольких кадров в секунду.