Javascript在PHP变量中获取屏幕宽度答案

【问题标题】：Javascript to get screen width in PHP variableJavascript在PHP变量中获取屏幕宽度
【发布时间】：2013-10-11 17:57:27
【问题描述】：

我有一个响应式网站，当该网站位于其他导航链接旁边的“桌面”视图（屏幕可用宽度 > 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 回显为 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);

【问题讨论】：

Reference: Why does the PHP (or other server side) code in my Javascript not work?的可能重复
您是说$screenWidth = '<script type="text/javascript">document.write(screen.availWidth);</script>'; 确实为您工作，通过为该变量分配一个数值？
这很有帮助，但并不能真正解释为什么我可以使用 PHP 到 <? echo $screenWidth; ?> 并获得没有问题的结果，但无法比较输出 <? if ($screenWidth <= "768") { //something } else { //something else } ?>
@scd1982 是的，屏幕宽度出现了，因为 JavaScript 被您的浏览器解析并包含在文档中。就 PHP 而言，$screenWidth 的类型为 string(72)。 PHP 永远不会看到整数值，因为当您的浏览器看到网页时，PHP 已经完成了工作
你的 call 只显示数字，是因为浏览器没有显示它周围的脚本块。因此字符串（72）（72 个字符）。这就是为什么您的比较不起作用的原因。 $screenWidth 变量实际上是整个脚本块字符串。

标签： javascript php

【解决方案1】：

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

【讨论】：

这让我快到了。在桌面视图中，“花式”下拉菜单出现（没有<a href> 链接）。在移动视图上，<a href> 链接和“花式”登录显示在菜单中。
我认为我看到的问题是，一旦屏幕大小调整到 768 以下，响应式 jquery 文件就会获取所有 <ul><li> 并创建选择选项菜单。所以在移动版本上，我最终得到的是<select>...<option value="login.php">Log in</option><option value=#>Log in &#x25BC;</option>...</select>。我正在将 jquery 响应式菜单文件添加到我原来的问题中。
您能否将<a href> 链接放在“fancy”
这是我最终不得不做的。它没有按照我想要的顺序完全显示，但我会使用 CSS 来实现它。谢谢！！

【解决方案2】：

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

【讨论】：

【解决方案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;
    }
}

【讨论】：

【解决方案4】：

一些想法：

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

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

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

【讨论】：

不错的“开箱即用”思维，但有更好的解决方案

【解决方案5】：

你可以试试

$userBrowserAtts = get_browser(null, true)

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

方便：

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

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

【讨论】：