Bootstrap Navbar Logo pixelated по телефону

Question

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

Как это: Small Logo, Big Logo

Он также прилипает к нижней части навигационной панели игнорируя обивка/краю

Я использую нагрузочный левый класс beacuse, кажется, работают лучше для изображений, чем навигационная панель -Бренд.

HTML

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="pull-left"><img src="images/logonavbar.png"></a> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">LOG IN</a></li> 
     <li><a href="#">TOURNAMENTS</a></li> 
     <li><a href="#">FAQ</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

CSS

.pull-left { 
    margin-top: 8px; 
} 

Он также отлично работает на моем мини-экране IPad и в любом браузере (даже при масштабировании вниз окна)

Этот мой сайт: Windfury.net

Answer 1

Вам нужно использовать изображение с более высоким разрешением и установить его ширину/высоту в размере, который вы хотите, чтобы он отображался.

Это происходит потому, что ваш телефон имеет больше пикселей, чем на вашем рабочем столе. Таким образом, чтобы компенсировать, ваш телефон растягивает пиксели, чтобы заполнить такое же пространство на экране. Поэтому вы получаете размытые изображения в виде 1 пикселя изображения! = 1 пиксель на экране телефона, обычно это намного больше, в зависимости от устройства.

Хорошей практикой является наличие одного изображения, например, 100x200 пикселей, а затем еще 200 x 400 пикселей. Затем используйте мультимедийные запросы для масштабирования больших изображений до 100 x 200 пикселей для мобильных устройств или устройств с высоким разрешением.

Это потребует использования фоновых изображений. Если вы хотите просто использовать тег изображения, вы можете просто использовать одно крупное изображение и обычно масштабировать его с помощью css width: 100px; height: 200px - единственным недостатком является то, что устройствам с не высоким разрешением придется загружать изображение больше необходимого.

В следующем примере показано, о чем я говорю, хотя и более, чем соотношение 2 к 1, учитывая, что изображение в примере довольно мало, а jsfiddle на мобильном устройстве невелика.

https://jsfiddle.net/s15swcn0/2/