使用 Javascript 检测访问者浏览器视图端口大小并保存到 PHP 变量

Question

我几乎可以肯定 PHP 无法检测浏览器的 View 端口大小，对吗？

但是从那以后，有人可以教我如何使用 Javascript 完成它，然后将该大小从 Javascript 变量收集到 PHP 中的变量吗？

问候

PS：对不起，如果有另一个帖子有同样的问题。

Answer 1

要获取视口大小，您必须使用 Javascript，是的。 对于这样做的代码示例（并不总是那么容易，浏览器之间存在差异），您可以查看 JS 框架/库如何确定该大小（例如，在 prototype.js 中，有一个getDimensions函数可以执行您的操作想）; 谷歌也会为您提供很多相关结果（ 这就是这些结果的一个例子）

然后，您必须将该大小发送到 PHP。 为此，两个解决方案：

• 一种是使用 Ajax 请求（发送宽度和高度作为参数）
• 另一种是动态构建一个<img>标签，带有一个指向 PHP 脚本的 URL，比如'http://.../size.php?w=WIDTH&h=HEIGHT'
  • 许多统计软件（比如 xiti / google analytics——不确定那些软件是否支持 ^^）都使用这种方法。

在第二种情况下，JS 代码可能如下所示：

<script type="text/javascript">
    var width = 100;
    var height = 80;
    var tag = document.createElement('img'); // Create the tag
    tag.src = 'http://tests/temp/viewport/size.php?';
    tag.src += 'w=' + width; // Pass the size
    tag.src += '&h=' + height;
    document.body.appendChild(tag); // Insert the tag into the page
</script>

然后，在 size.php 中，您使用 $_GET['w'] 和 $_GET['h']。 注意：您可能必须从 size.php 返回一些有效的图像数据，才能得到“红叉”图片（例如，透明的 gif，大小为 1x1，就可以了）

Answer 2

我想这就是你可以用 jQuery 做到这一点的方法：

var viewport_Width = $(window).width();  
var viewport_Height = $(window).height();  

但是这种方法在 Opera 中有一个错误。 看这里：

http://dev.jquery.com/ticket/3046

使用 Opera 的解决方法。

然后您可以将它发送到服务器（通过 POST 或 AJAX 调用）以将其保存在 PHP 中。

希望有所帮助。

使用像 jQuery 这样的库可以避免许多麻烦和浏览器黑客攻击。 认真考虑用一个，最后解决了很多服务器端的问题。

Answer 3

这是我要做的（基于 Pascal MARTIN 的）：

<script type="text/javascript">
    var tag = document.createElement('img'); // Create the tag
    tag.src = 'http://path/to/file.php?';
    tag.src += 'w=' + document.documentElement.clientWidth;
    tag.src += '&h=' + document.documentElement.clientHeight;
    document.body.appendChild(tag); // Insert the tag into the page
</script>

我已经在所有主流浏览器（IE6、IE7、IE8、Firefox 2.x、Firefox 3.x、Opera 9.6x、Safari 3. 和 Chrome 2.x）上进行了测试。