2016-05-26 4 views
0

juniorgoldreport.com - сайт, над которым я работаю, и он сделан в Wordpress. Я использую этот плагин специально - http://shiftnav.io/free/Мобильное меню навигации отображается на рабочем столе, но не мобильное - редактировать: изображения добавлены

Плагин для мобильного навигационного бара невероятен, мне очень нравится его функциональность и простота в использовании.

У него есть настройка, чтобы установить, когда показывать панель инструментов, я решил показать ее на 960 пикселей. Единственное изменение, которое я сделал с ним.

Когда я изменяю размер окна своего рабочего стола, появляется навигатор (я не делал необходимых изменений, чтобы удалить заголовок и старый nav при создании нового объекта). До сих пор так здорово.

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

@media (max-width:960) 

против

@media on screen and (max-device-width:960) 

Но я не совсем уверен. У кого-нибудь есть идея, почему это происходит?

EDIT - изображения, которые помогут вам лучше понять.

Навигационный бар, когда окно рабочего стола rezied - это apears (яй) enter image description here

Бар нав НЕ появляться на мобильных устройствах, хотя - я не знаю, почему

enter image description here

+0

Я вижу свой Navbar в мобильном телефоне. Я не вижу никаких проблем –

+0

ваши шутки правильно? – Robolisk

+0

@ShahGhafoori Я добавил фотографию, чтобы лучше объяснить, в чем проблема. – Robolisk

ответ

1

Вкратце: ваш сайт на самом деле не реагирует, потому что метатег viewport отсутствует, поэтому сайт отображает ширину 960 пикселей на мобильных устройствах. Так как это выше точки останова, меню не отображается.

Вопрос этот опечатка в голове сайта:

<meta name"Keywords" content="Gold reports resource stock news and top gold articles" 
<meta name="viewport" content="width=device-width"> 

ключевые слова, мета имеет две синтаксические ошибки недостающий «=» после «имя», и отсутствие закрытия>

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

Исправить ошибки синтаксиса в первом метатеге и решить проблему.

<meta name="Keywords" content="Gold reports resource stock news and top gold articles"> 
<meta name="viewport" content="width=device-width"> 

Mobile display with menu open and viewport meta tag present

Надежда, что помогает

Смежные вопросы