Я уже некоторое время играю с веб-сайтом, и кажется, что когда я запускаю его на Chrome, на мобильном телефоне, он полностью ломается.
Чтобы исправить это,Я сделал минимальную копию моей навигационной панели, и проблема все еще возникает.
У меня есть код ниже, если кто-нибудь может мне помочь, это было бы здорово:).
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Heading -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,width=device-width,initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<!-- Navbar toggle button -->
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar logo -->
<a class="navbar-brand" href="/#">
<img class="img img-responsive" style="width:48px; height:48px;" alt="logo"
src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" />
</a>
<!-- Some other navbar shit; mostly -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto animated ">
<li class="nav-item" id="home-navi">
<a class="nav-link" href="/#"><i class="fa fa-home" aria-hidden="true"></i> Home </a>
</li>
<li class="nav-item" id="help-navi" >
<a class="nav-link" id="help" href="/#"><i class="fa fa-question-circle" aria-hidden="true" ></i> Help </a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Вот фотографии того, что идет не так.(Оба протестированы на инструментах разработчика Samsung Galaxy S5).
на Chrome
на Firefox
- Спасибо, Сэм.