iPhone - URI данных (css background images) работают только при подключении к WIFI
Я создал мобильное веб-приложение для устройств Android и iPhone, после тестирования я был рад, что все работает отлично, и решил немного его оптимизировать.
Я решил, что я буду использовать данные URI в моем CSS-файле, так как все изображения являются маленькими 16x16px PNG изображениями.
Во время тестирования моего iPhone, подключенного к Интернету через WiFi, изображения загружаются нормально, однако при подключении с использованием мобильного подключения для передачи данных изображения не загружаются.
Просматривая журнал ошибок Apache, я вижу, что по какой-то причине изображение запрашивается в виде файла (и не обнаруживается), хотя при использовании WiFi ошибок нет...
File does not exist: /www/min/data:image, referer: http://mysite.com/login/
CSS, который я использую, выглядит следующим образом...
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA5CAYAAAD3PEFJAAAAUUlEQVQYV4XMyw1AABQF0ePpQCNK0Ke+lCEkFmLjWRHx3dzcZCaDItV1m5GZgn0y1+M9AWfl4r2Cv/Jd+fDWN/AXgCyrqukCY6APDIEpMAeWDc7zXPFRLR43AAAAAElFTkSuQmCC");
Я перепробовал все, что мог, не используя сокращение css / сокращение css, различные типы пантомимы, не используя Google Minify, но все безрезультатно. Но это все еще не объясняет, почему все это прекрасно работает через WiFi.
Устройство Android также отлично работает, как и Firefox, Chrome и настольная версия Safari. Также при загрузке реальных файлов изображений PNG (в отличие от встраивания изображений с использованием URI данных) изображения загружаются нормально.
Если кто-нибудь может пролить свет на это, я буду вечно благодарен, большинство вещей, которые я могу решить, но это меня полностью озадачило!
2 ответа
Это на самом деле не решение, а скорее работа вокруг...
После долгих раздумий кажется, что я могу найти единственный способ заставить это работать (usin go2) - это использовать встроенные стили для CSS, содержащие данные URI.
Однако я намеревался вставить изображения во внешнюю таблицу стилей, чтобы они (и внедренные изображения) стали кэшированными, а встраивание изображений в сам HTML-документ означает, что я не могу кэшировать изображения, поэтому они должны загружаться при каждом запросе.
Как всегда, если есть лучший способ, я хотел бы услышать об этом.
Мне интересно, если носитель блокирует схемы URI данных или обычный не поддерживает его. Я бы попытался подключить ноутбук к мобильному соединению и посмотреть, работают ли URI данных. Хм, но тогда вы бы не увидели сбой запроса в журналах вашего веб-сервера. Я также рекомендую просмотреть запрос, поступающий на сервер с помощью wireshark, и посмотреть, есть ли разница в запросах между запросом от мобильного подключения и Wi-Fi (в частности, заголовки, отправляемые в двух запросах)