Question

当网站位于其他导航链接旁边的“桌面”视图（屏幕可用宽度> 768）时，我有一个响应式网站，其simple drop-down login menu。当屏幕宽度低于768时，导航链接最终会出现在选择选项中。问题是下拉登录菜单在选择选项中不起作用。

当屏幕宽度小于768时，我想使用PHP将下拉登录菜单更改为简单的<a href>链接。

现在我的页面<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>&#x25BC;</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 echo给出了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">&nbsp;</span>');
        }
    });
}
})(jQuery);

Answer 1

PHP是服务器端执行的，这意味着var screenWidth包含：“document.write（screen.availWidth）;”当你比较它。您的输出在客户端执行..

Answer 2

您最简单的选项可能是填充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>&#x25BC;</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 Example

Answer 3

要制作响应式设计，过去我们会使用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;
    }
}

Answer 4

一些想法：

我不认为PHP可以直接与桌面交互。

最好的办法是让客户通过javascript向您发送回复。使用标题中包含的屏幕大小变量立即回发到同一页面，将其添加为cookie，如果cookie存在，则不要再次回发。

所以第1步：检查cookie是否存在，并告诉您客户端的屏幕大小。（或使用会话变量）如果是，请使用它。如果不是，请使用javascript将您发送到同一页面，并使用标识窗口大小的查询字符串。第2步：如果不存在cookie并且您具有指示窗口大小的查询字符串，请相应地创建cookie并格式化。

Answer 5

你可以尝试

$userBrowserAtts = get_browser(null, true)

返回有关浏览器的各种信息的便捷数组。但要注意 - 这依赖于$ _SERVER ['HTTP_USER_AGENT']，这可能是欺骗性的。所以这种方法不是防弹的。我不知道它是否会返回屏幕宽度，但您应该能够确定它是否是移动设备，或者它是平板电脑还是台式机。

手边：

http://www.php.net/manual/en/function.get-browser.php

执行此类操作的最佳方法是使用CSS3媒体查询，但如果服务器真的必须了解浏览器，那么这是您唯一可以做的事情。

Answer 6

使用Javascript设置cookie并使用PHP检索其值：

<head>
    <script>document.cookie = "screenWidth=" + screen.availWidth;</script>
</head>
<body>
    <?php $screenWidth = $_COOKIE['screenWidth']; ?>

完美工作！

Javascript获取PHP变量的屏幕宽度

6 个答案: