Siteмедиазапросы не работают на мобильных устройствах
выше сайт имеет бутстраповские запросы @ медиа, используя максимальную ширину и мин-ширину, которая работает при изменении размера окна моего рабочего стола браузера. Но по какой-то причине я вижу сайт как настольную версию, а медиа-запросы, чтобы сделать его отзывчивым, не отображаются на мобильных устройствах.
Любые мысли по этому поводу?
вот пример некоторых из isues вы с вашим медиа-запросов на сайте:
media="screen"
@media only screen and (max-width: 767px)
#Intro {
max-height: 230px;
}
staging.shipmenthq.com/media="screen"
@media only screen and (max-width: 467px)
#Intro {
min-height: 300px;
}
Так ваша максимальная высота & мин-высота конфликтуют.
Что касается невосприимчивости; Я вижу, что .navbar и ни один из его детей не подключены к медиа-запросам, поэтому это не ответит.
Похоже, что вам нужно пройти через свои медиа-запросы, чтобы переделать их с нуля, так как у вас есть некоторые проблемы с каскадом, связанные с каскадом &.
Я не думаю, что он ищет несоответствия в своих медиа-запросах, он ищет причину, почему медиа-запросы не работают при просмотре с помощью мобильного устройства. Мое решение (добавление метатега viewport) исправляет проблему в его вопросе. –
@WilliamPatton - хороший улов, я был сосредоточен на неустойчивом способе написания медиа-запросов. – Jason
Да, если в медиа-запросах больше таких разделов, тогда правила должны быть переписаны/переупорядочены, это точно. По крайней мере, теперь он может заставить его работать на мобильных устройствах - независимо от того, выглядит он хорошо или каскадирует в чрезмерно интенсивный переработанный процессор, но еще не видно haha. –
Вы только что забыли установить ширину окна просмотра, добавив метатег viewport к странице. Поместите это в свой заголовок страницы где-нибудь в разделе <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Посмотрите на базовый пример в Bootstrap Docs, чтобы увидеть, как они предлагают использовать тег.
EDIT: Я просто нашел это довольно long guide on what the viewport tag is и что он фактически используется для так, если вы заинтересованы его взглянуть.
Я не вижу проблемы с сайтом, с которым вы связались. Его отзывчивость от того, что я вижу.
Если вы говорите, что ваше верхнее меню (меню заголовка) не отображается так, как должно быть для сайта Bootstrap, я должен сказать, что вам не хватает нескольких div в разделе navbar.
Если вы добавите их обратно, это будет выглядеть так, как должно выглядеть.
.: например
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- navbar header div -->
<div class="navbar-header">
<!-- navbar collapse btn -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand pull-left" href="#Intro"><img src="images/logo.png" width="201" height="38" alt="ShipmentHQ"></a>
<span class="phoneNumber pull-right"><img src="images/phonenumber.png" alt="call us at 888-234-5678" width="174" height="24"></span>
<!-- navbar collapse div -->
<div class="collapse navbar-collapse">
<ul class="nav pull-right">
<li><a class="NavLink" href="#Services">Services</a></li>
<li><a class="NavLink" href="#About">About</a></li>
<li><a class="NavLink" href="#ResourcesHead">Resources</a></li>
<li><a class="NavLink" href="#Contact">Contact</a></li>
вот что вам нужно.
Надеюсь, это поможет.
Я проверил ваш сайт, и поскольку вы спрятали горизонтальную полосу прокрутки, вы должны свернуть навигационную панель под шириной 500 пикселей независимо от устройства. Это всего лишь отзыв от темы. –
Я скажу, что ваш вопрос был опущен несколько раз. Вероятно, из-за того, что вопрос не очень подробный. – Jason