У меня есть отзывчивый сайт, у которого есть простое раскрывающееся меню входа, когда сайт находится в «рабочем столе» (ширина доступной ширины> 768) рядом с другими навигационными ссылками. Когда ширина экрана падает ниже 768, навигационные ссылки заканчиваются выбором. Проблема заключается в том, что выпадающее меню входа не работает из выбранного параметра.
Я хотел бы использовать PHP для изменения выпадающего меню входа в систему с простой ссылкой <a href> когда ширина экрана становится меньше 768.
Прямо сейчас у меня на моей странице <head> :
<? $screenWidth = '<script type="text/javascript">document.write(screen.availWidth);</script>'; ?>
В <body> :
<? if($screenWidth <= "768") { echo '<li><a href="login.php">Log in</a></li>'; } else { ?> <div id="fancy"> <li id="login"> <a id="login-trigger" href="#">Log in <span>▼</span></a> <div id="login-content"> <form> <fieldset id="inputs"> <input id="username" type="email" name="Email" placeholder="Your email address" required> <input id="password" type="password" name="Password" placeholder="Password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit" value="Log in"> <label><input type="checkbox" checked="checked"> Keep me signed in</label> </fieldset> </form> </div> </li> <? } ?>
На моем рабочем столе я повторил $ screenWidth, который дает 1920. Поэтому я ожидаю, что вы увидите меню «выпадающего» выпадающего меню. (И это так).
На моем мобильном устройстве эхо-сигнал $ screenWidth дает 320. Тогда я ожидал, что будет отображаться ссылка <a href> . (Это не так – вместо этого отображается меню «причудливое»).
Кажется странным, что переменная, когда эхо в теле будет давать другое число, но при сравнении в выражении if она не меняет результат.
Есть ли лучший способ изменить выход?
Изменить: код режима jquery отзывчивый
jquery.responsivemenu.js:
(function($) { $.fn.responsiveMenu = function(options) { var defaults = {autoArrows: false} var options = $.extend(defaults, options); return this.each(function() { var $this = $(this); var $window = $(window); var setClass = function() { if ($window.width() > 768) {$this.addClass('dropdown').removeClass('accordion').find('li:has(ul)').removeClass('accorChild');} else {$this.addClass('accordion').find('li:has(ul)').addClass('accorChild').parent().removeClass('dropdown');} } $window.resize(function() { setClass(); $this.find('ul').css('display', 'none'); }); setClass(); $this .addClass('responsive-menu') .find('li.current a') .live('click', function(e) { var $a = $(this); var container = $a.next('ul,div'); if ($this.hasClass('accordion') && container.length > 0) { container.slideToggle(); return false; } }) .stop() .siblings('ul').parent('li').addClass('hasChild'); if (options.autoArrows) { $('.hasChild > a', $this) .find('strong').append('<span class="arrow"> </span>'); } }); } })(jQuery);
Самый простой вариант – заполнить обе опции в DOM, а затем использовать запросы CSS3 Media, чтобы скрыть / показать правильный элемент на основе размера экрана.
Таким образом, ваш HTML-код может выглядеть так:
<li class="login-link"><a href="login.php">Log in</a></li> <div id="fancy"> <li id="login"> <a id="login-trigger" href="#">Log in <span>▼</span></a> <div id="login-content"> <form> <fieldset id="inputs"> <input id="username" type="email" name="Email" placeholder="Your email address" required> <input id="password" type="password" name="Password" placeholder="Password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit" value="Log in"> <label><input type="checkbox" checked="checked"> Keep me signed in</label> </fieldset> </form> </div> </li>
И ваш CSS мог бы выглядеть так:
.login-link, #login{ display: none; } @media screen and (max-width: 767px){ .login-link { display: block; } #login{ display: none; } } @media screen and (min-width: 768px) { #login{ display: block; } .login-link{ display: none; } }
Изменить: Исправлена ссылка #login. Редактирование 2: Добавление примера JSFiddle Пример JSFiddle
PHP выполняется на стороне сервера, это означает, что var screenWidth содержит именно: document.write (screen.availWidth); когда вы его сравниваете. Вывод выполняется на стороне клиента.
Чтобы сделать отзывчивый дизайн, в прошлом мы использовали JavaScript. С CCS3 вы можете использовать @media для ответа на изменения в окне просмотра.
Подобно:
@media screen and (max-width: 1280px) and (max-height: 1024px) { .splash { width: 100px; } } @media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) { .splash { width: 300px; } }
Некоторые мысли:
Я не думаю, что PHP может напрямую взаимодействовать с настольным компьютером.
Лучше всего, чтобы клиент отправил вам ответ через javascript. Сделайте немедленную обратную передачу на ту же страницу с переменной размера экрана, включенной в заголовок, добавьте ее в качестве файла cookie, и если файл cookie существует, не отправляйте сообщение назад.
Итак, шаг 1: проверьте, существует ли файл cookie со значением, указывающим размер экрана клиента. (или использовать переменные сеанса), если да, запустите с ним. если нет, есть javascript, который отправляет вас на ту же страницу с строкой запроса, определяющей размер окна. Шаг 2: если cookie не существует, и у вас есть строка запроса, указывающая размер окна, создайте файл cookie и соответствующим образом настройте.
Вы можете попробовать
$userBrowserAtts = get_browser(null, true)
Возвращает удобный массив всех видов информации о браузере. Но будьте осторожны – это зависит от $ _SERVER ['HTTP_USER_AGENT'], и это может быть подделано. Таким образом, этот метод не является доказательством пули. Я не знаю, вернет ли он ширину экрана как таковой, но вы, вероятно, сможете узнать, мобильна ли она или планшет или рабочий стол.
удобно:
http://www.php.net/manual/en/function.get-browser.php
Лучший способ сделать это – с помощью мультимедийных запросов CSS3, но если сервер действительно должен знать о браузере, это единственное, что вы можете сделать.