новый iPad (iPad 3), как бороться с изображениями?JS Script для автоматической загрузки нужного размера?

Question

Так что теперь, когда на рынке появился новый ipad, как лучше всего работать с изображениями для вашего сайта?

есть ли скрипт, который автоматически выбирает версию e x1 или x2 в зависимости от разрешения экрана?

Answer 1

Вы можете сделать это несколькими различными способами - либо в CSS напрямую, используя другой медиа-запрос, либо в Javascript, используя свойство window.devicePixelRatio.

Этот пост содержит хорошее объяснение того, как это сделать.это:

http://mikepultz.com/2012/03/how-to-make-images-look-good-on-the-ipad-3/

Answer 2

Я использую медиа-запрос. Это самый простой способ. Вот код, который я использую:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
   .your-class-name {
      background: url("images/your-image@2x.png"); 
      background-size: 18px 18px; 
   }
}

Помните:

• Добавьте «@ 2x» перед расширением

• Используйте тот же «размер фона», что и у изображений без сетчатки

• Изображения на сетчатке в два раза больше, чем на сетчатке

Эксп:

без сетчатки = 100px x 100px

Retina = 200px x 200px

Answer 3

Несколько дней назад я сам изучал это - вас может заинтересовать адаптивный маршрут.Проверьте это http://adaptive -images.com / довольно просто для реализации.В нем показано, как изменить его в зависимости от дисплея, - имейте в виду, что вам придется сохранять изображения с высоким разрешением, и эти устройства могут иметь не лучшее интернет-соединение.