【问题标题】:Get browser window size/resolution with PHP使用 PHP 获取浏览器窗口大小/分辨率
【发布时间】:2012-01-17 14:07:20
【问题描述】:

我有一个以导航栏开头的页面,具有特定的高度,并在其下放置了一个代码,该代码应填写其余高度。我如何为各种分辨率编码?我需要浏览器的“工作区”大小。

【问题讨论】:

  • 纯 PHP 无法找到窗口大小。这需要 Javascript - 很多结果都只是谷歌:javascript window size。但是,正如@FakeRainBrigand 所说,您在标题中提到的内容可以使用 CSS
  • 这听起来像是可以用 CSS 完成的(如果我理解正确的话)。

标签: php javascript html css browser


【解决方案1】:

使用绝对定位。

.nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}
.content {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
}

【讨论】:

  • 那行不通。折叠后的东西仍然是body 颜色:jsfiddle.net/FeP3b
  • @myhead - 谁说过背景颜色或超出折叠范围的内容?我的代码导致一个元素在具有固定高度的标题之后填充浏览器窗口中的剩余空间。也许您对原始海报的要求假设过多。
  • 你是对的 - 这是一个假设,但我相信这是一个公平的假设。如果您不应用背景颜色或边框,那么有什么理由让元素填充剩余空间?
【解决方案2】:

不能用 PHP 完成。即使可以,this CSS 也是一个更好的解决方案。

您遇到了目前最烦人的 CSS 问题。这个问题的答案似乎与提出问题的人一样多。上面的链接是我为这个问题找到的最好的、跨浏览器友好的解决方案。

不要让关于页脚的部分让您感到困惑。如果您不想要页脚,它仍然可以正常工作。

【讨论】:

  • 非常棒的文章和演示! +1
【解决方案3】:

这就是我的做法。我只是用这个简单的小工具替换了我的 index.php,并将我的 index.php 重命名为 index2.php。它只是使用纯 javascript 检查这些内容并将它们作为 $_GET 变量传递给您的真实索引文件。还有什么比这更容易的呢?全做完了!花了我 5 分钟,会花你 30 秒 :)

<html>
<head>
    <script type="text/javascript">

        if(window.innerHeight > window.innerWidth){
            var landscapeOrPortrait = 'portrait';
        } else {
            var landscapeOrPortrait = 'landscape';
        }

        var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

        var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;



        window.location.replace('index2.php?width='+width+'&height='+height+'&landscapeOrPortrait='+landscapeOrPortrait);            
    </script>            
</head>

【讨论】:

    【解决方案4】:

    $window_width = "&lt;script type='text/javascript'&gt;document.write(window.innerWidth);&lt;/script&gt;";

    【讨论】:

    • 这是世界上的一些东西,我喜欢它,像魅力一样工作
    猜你喜欢
    • 1970-01-01
    • 2014-04-24
    • 1970-01-01
    • 2010-10-24
    • 1970-01-01
    • 1970-01-01
    • 2011-06-15
    • 2016-03-07
    • 2017-05-11
    相关资源
    最近更新 更多