Я провел неделю, пытаясь понять это. Я создаю веб-сайт django, и у меня есть навигационное меню, которое всегда остается скрытым за каким-то элементом, когда я смотрю на веб-сайт в своем мобильном представлении. На Chrome Dev Tools он выглядит отлично, но на моем телефоне он полностью исчез.
Пример Chrome Dev Tools против телефона:
Моим первым шагом в решении этой проблемы было рассмотрение z-индекса. Ни один из опробованных мной индексов не сработал, и я позаботился о том, чтобы найти решения для z-индексов, не работающих на Inte rnet, например, с необходимыми предварительными условиями. Поскольку мое навигационное меню находится в моем базовом шаблонном файле. html, я даже переместил заголовок вниз до самого низа элемента body (он имеет фиксированную позицию), чтобы {% block content%} всегда был над заголовком , Это тоже не сработало.
Поэтому я попытался переместить все элементы влево, когда была открыта панель навигации. Вот что произошло.
Если я попытаюсь проверить это на chrome инструментах разработчика, щелкнув правой кнопкой мыши пустое место, где должно пустое место, я получаю следующее:
... то есть единственное, что там есть, это сам файл HTML. Я полностью сбит с толку. У меня также нет фона в моем элементе HTML.
У меня такое ощущение, что это проблема, относящаяся к Django, возможно, связанная с тем, что моя навигация покоится в моей базе. html template , который распространяется почти на всех моих других страницах. Я использовал точно такой же формат навигации для других сайтов, которые я создал, и все они работали нормально, поэтому я сомневаюсь, что проблема заключается в навигации css. У меня также есть несколько других навигационных меню для определенных страниц, которые все работают нормально, что я предполагаю, потому что их навигационные меню покоятся в шаблоне, который не base. html, то есть это не так продлен. Я в отчаянии - у кого-нибудь есть мысли, почему это происходит? Огромное спасибо заранее.
Редактировать: При открытии вкладки View Source все выглядит хорошо. Я отсканировал весь документ, но вот обзор только навигационной части html на случай, если это уместно:
<header>
<a href="/home/"><img></a>
<nav class="nav">
<ul class="styled-list">
<li><a href="/home/"><img>Home</a></li>
<li><a href="/browse/"><img>Browse</a></li>
<li><a href="/messages"><img>Inbox </a></li>
<li><a href="/activity"><img>Activity</a></li>
<li class="dropdown">
<button class="dropbtn">
<a href="/users/profile/4/"><img>e</a>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/users/profile/4/">Profile</a>
<a href="/users/logout/">Log Out</a>
</div>
</li>
</ul>
</nav>
<div class="nav-toggle">
<div class="hamburger"></div>
</div>
</header>
Редактировать 2 : я попытался извлечь HTML базы. html и помещая ее непосредственно на одну из страниц, чтобы она не была расширена, и проблема продолжалась даже без расширения базы. html. Так что это, вероятно, не проблема Django, но я все еще озадачен тем, что может мешать обзору.
Редактировать 3 : Если это поможет, я на самом деле могу получить доступ к навигационным элементам на мобильном телефоне, как я могу нажимать на ссылки и go на этих страницах. Просто отказывается появляться, вот и все. Это означает, что я думаю, что навигация уже выше всего остального, но по какой-то причине выглядит так, что ее фон и текст прозрачны, что не имеет никакого смысла.
Редактировать 4 : только что понял, что мобильный вид работает нормально на Samsung, но глючит на Apple. Теперь я просто безнадежно растерялся.
Редактировать 5 : Сделан минимальный воспроизводимый пример для jsfiddle, https://jsfiddle.net/aqxr9duy/2/. Он отлично работает на ноутбуке, но если вы просматриваете его на iPhone (jsfiddle не совсем оптимизирован для просмотра на мобильных устройствах, но все еще несколько виден), навигация не выглядит должным образом, как на ноутбуке.