Отображение логотипа для мобильных устройств для blogger

Question

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

Ссылка на мой блог: www.5minLunchBox.blogspot.com

Кто-нибудь есть идеи, как исправить Это?

Спасибо!

Answer 1

Ваша натуральная ширина составляет 220px. Но ваша мобильная ширина видового экрана превышает эту величину от 320 до 480 пикселей в зависимости от мобильного устройства. Не говоря уже, вы используете изображение .jpg, которое сильно пикселировано.

РЕШЕНИЯ

1. Ознакомьтесь с .svg технологии. Использование SVG позволит вам манипулировать изображением на всех ширинах и использовать ваш max-width:100%;.
2. Используйте изображение большего размера (не менее 480 пикселей) таким образом, вы можете изменять размер без потери разрешения и не нуждаться в повторной настройке, что является вашей проблемой здесь. Вы расширения .jpg пикселей

После того, как вы добавили больший логотип, мы надеемся, .png, по крайней мере, но предпочтительно .svg, выполните следующие действия:

@media only screen and (-webkit-min-device-pixel-ratio: 1) { 
    .widget iframe, .widget img { 
     width:100%; 
     max-width: 320px; 
    } 
} 

Answer 2

Это происходит потому, что реальный логотип Размеры jpg: 200x90 pixels. На настольной версии установите ширину на 200px, но версия для смартфона задает ширину 100%. Для этого на iPhone 6 ширина логотипа становится 375px, и изображение выглядит размытым и неровным (на iPad становится 768px). Вы можете увеличить реальный размер логотипа jpg, но размер файла может быть слишком большим. Если вы можете изменить формат изображения, вы можете конвертировать логотип в svg.