Javascript在PHP变量中获取屏幕宽度 - Javascript to get screen width in PHP variable

我有一个响应式网站，当网站处于其他导航链接旁边的"桌面"视图(屏幕可用宽度> 768(时，它有一个简单的下拉登录菜单。当屏幕宽度降至 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>
<? } ?>

在我的桌面上，我回应了 1920 年的$screenWidth。因此，我希望显示"花哨"下拉登录菜单。(确实如此(。

在我的手机上，$screenWidth回声给出了 320。然后我希望显示<a href>链接。(它没有 - 相反，它显示"花式"菜单(。

在

正文中回显时，变量会给出不同的数字，这似乎很奇怪，但是在 if 语句中比较时，它不会改变输出。

有没有更好的方法来改变输出？

编辑：jquery响应式菜单代码

jquery.responsive menu.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);

最简单的选择可能是在 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 示例

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 媒体查询，但如果服务器真的必须了解浏览器，这是您唯一能做的事情。