Размытые изображения на Android-браузере

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

Загрузка изображений размыта в моем браузере по умолчанию Galaxy S3, но в chrome & firefox они отлично загружаются без обходного пути. Изображения 2x уже для высоких экранов DPI, так что это не проблема.

Работа вокруг помещает любой текст в ссылку. Я кладу "."

<a href="#">.</a> 

И размер шрифта очень мал.

 #closeButton a{ float:left; display:block; position:fixed; top:9px; left:10px; width:46px; height:44px; background:url(../img/camera/closeX@2x.png) 0 0 no-repeat; background-size:46px 90px; text-align:center; font-size:1px; color:#FFF; } #closeButton a:active{ background-position:0 -45px; } <span id="closeButton"><a ontouchstart="" href="vibes.html"></a></span> 

Скриншот без обходного пути: http://igor2.com/blurry/no-text.png

Скриншот с обходным путем: http://igor2.com/blurry/with-text.png

Любая помощь будет оценена! Я тянул свои волосы, пытаясь понять это. Должно быть решение, так как мобильные и другие мобильные страницы facebook загружают хорошие четкие изображения / значки. Спасибо!

Solutions Collecting From Web of "Размытые изображения на Android-браузере"

У меня была та же проблема, и выяснилось, что причиной проблемы является position:fixed и z-index в браузере Android по умолчанию ( не Chrome!).

После удаления этих атрибутов css все мои изображения стали очень четкими и понятными.

По моему опыту, position:fixed – это не для мобильных устройств, особенно для Android и более старых версий iOS. Единственный мобильный os, который я знаю, который может обрабатывать position:fixed хорошо iOS6 и более поздние версии.


Обновление: Пока единственное исправление, о котором я знаю, – это просто избежать объединения position:fixed и z-index . Иногда просто избавление от z-index делает трюк или не использует position:fixed вообще на iOS и Android. В любом случае, это не очень хорошая практика на мобильных телефонах. Кроме того, вы можете только молиться, чтобы Chrome заменил Android Stock Browser как браузер по умолчанию в будущем как можно быстрее на большинстве Android-устройств.

Я замечаю из ваших скриншотов, что вы в настоящее время тестируете это на своем 4G (то есть: мобильное соединение).

Вы пытались повторить тесты вместо Wi-Fi? Вам нужно убедиться, что вы не извлекаете кеш при сравнении, поэтому стоит бросить свой браузер в режим частного просмотра / инкогнито – это заставит его захватывать свежие ресурсы от хоста, а не использовать внутренне кэшированные активы (гораздо проще, чем вытирать ваши Кеш браузера каждый раз).

Причина, по которой я упоминаю подключение к Интернету устройства, заключается в том, что в прошлом году я столкнулся с действительно подобной проблемой и после многократной охоты пришел к осознанию того, что прокси-сервер сети сжимал изображения до доставки, чтобы сэкономить на пропускной способности.

Я мог бы быть в стороне от отметки, но это, безусловно, то, что вы должны проверить, чтобы вы могли, по крайней мере, пересечь эту возможность из своего списка.

Если это действительно так, то действительно интересная дискуссия по всему: http://blog.sebcante.com/2012/01/prevent-image-compression-from-3g.html

Плохая новость заключается в том, что мобильные сети не всегда обращают внимание на заголовки HTTP без кэша.

Доступны три самых простых варианта:

  • Обслуживать ваши изображения через https – сеть не будет кэшировать зашифрованный трафик;
  • Обслуживать ваши изображения через другой порт http;
  • Используйте URL-адрес данных для встраивания изображений в строку (хотя в этот момент есть последствия для поддержки браузера).

Наконец, в файле htaccess шаблона HTML5 есть частичное обходное решение, которое каким-то образом смягчает эти эффекты. В файле htaccess:

 # ---------------------------------------------------------------------- # Prevent mobile network providers from modifying your site # ---------------------------------------------------------------------- # The following header prevents modification of your code over 3G on some # European providers. # This is the official 'bypass' suggested by O2 in the UK. <IfModule mod_headers.c> Header set Cache-Control "no-transform" </IfModule> 

Это работает с двумя сетями Великобритании, которые я тестировал, но ваши результаты могут отличаться.