6

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

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

现在我的页面中有<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 回显为 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);
4

5 回答 5

5

您最简单的选择可能是在 DOM 中填充这两个选项，然后使用 CSS3 媒体查询根据屏幕大小隐藏/显示适当的元素。

因此，您的 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 示例

于 2013-10-04T16:39:45.357 回答
5

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

于 2013-10-04T16:31:32.170 回答
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;
    }
}
于 2013-10-04T16:29:25.987 回答
1

一些想法：

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

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

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

于 2013-10-04T16:30:52.523 回答
0

你可以试试

$userBrowserAtts = get_browser(null, true)

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

便利：

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

做这种事情的最好方法是使用 CSS3 媒体查询，但如果服务器真的必须了解浏览器，那么您只能这样做。

于 2013-10-04T16:34:28.010 回答