Изображения Parallax размыты/V. пикселей на iphone. Need CSS hint

Я работаю над веб-сайтом и столкнулся с проблемой.Изображения Parallax размыты/V. пикселей на iphone. Need CSS hint

Фоновые изображения выглядят действительно пиксельными на экранах iphone.

Это HTML я использую

<div class="parallax img-overlay3" style="background-image:url(img/pictures/food02.jpg)" data-stellar-background-ratio="0.2">

Когда я смотрю, используя нечто вроде http://mobiletest.me/iphone_5_emulator Это выглядит идеально, но на самом деле смотрит в Iphone изображения, кажется, быть увеличено в небольшой части любого изображения я ставлю там. Идти в течение нескольких часов, и это кажется проблемой без четкого ответа.

источник

2014-09-20 Paul Urmston

Вы имеете в виду, что вам нужны эти изображения с высоким разрешением изображения на iphone? Я имею в виду, что iphone поставляется с сетчаткой, что означает, что у вас есть не только 72 ppi, но и более 300ppi. Изображения Youre должны соответствовать этому разрешению. –

Я спрашивал больше, почему в эмуляторе это работает, но на самом телефоне это не так. Нужно ли мне помещать на сервер 2 разных типа фотографий, так как в зависимости от того, какое устройство посетило его, вы могли бы посмотреть на любую из фотографий? Кажется, что это похоже на то, что у него есть отзывчивый веб-сайт. Я видел, что эта проблема не существует на других отзывчивых веб-сайтах ... только эта. :( –

Отзывчивый не означает, что вам не нужно прилагать усилия для создания образов. Например, у BBC есть процесс, который создает 9 разных изображений для разных размеров веб-сайтов, и они загружаются в зависимости от разрешения/dpi. –

Вам нужно иметь в виду, что есть устройства, которые способны отображать изображения с разрешением выше 72ppi. Например, новый iPhone 6 plus имеет 401ppi. Вам необходимо предоставить дополнительные изображения для этих устройств. Для этого используйте медиа-запрос с соотношением пикселей устройства: 2. Этого достаточно. Для этого есть JavaScript-решения, но я думаю, вы можете использовать Google, чтобы их найти.

Взгляните на это для более CSS фрагментах: http://stephen.io/mediaqueries/

источник

2014-10-02 14:53:56

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

Я думаю, что любое изображение с «фоном-позицией: фиксированное» увеличит изображение до размера всего тела документа, когда я установил «background-position: scroll» на мобильных устройствах изображения выглядят красиво и правильно расположены.

источник

2016-01-21 15:46:04

Изображения Parallax размыты/V. пикселей на iphone. Need CSS hint

ответ

Смежные вопросы