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

要获得视区大小,必须使用javascript,是的。 对于这样做的代码示例(并不总是那么简单,浏览器之间存在差异),您可以查看JS框架/库如何确定该大小(例如,在prototype.js中,有一个 getDimensions 做你想做的事);谷歌也会给你很多结果。( this one 是这些结果的一个例子)

然后,您必须将该大小发送到PHP。为此,有两种解决方案:

• 一种是使用Ajax请求(发送宽度和高度作为参数)
• 另一个是动态构建 <img> 标记,其URL指向PHP脚本,如 '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大小的图片就可以做到这一点)。

以下是我将要做的(基于帕斯卡·马丁的):

<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)上测试过。和铬2.x)。

我想这就是使用jquery的方法:

var viewport_width=$(window).width();
var viewport_height=$(window.height();

但这种方法在歌剧中有缺陷。请参见这里:

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

在歌剧中使用变通方法。

然后您可以将其发送到服务器(通过post或ajax调用)以将其保存在PHP中。

希望有帮助。

使用jquery这样的库可以避免许多麻烦和浏览器攻击。 认真考虑使用它,最终解决了很多服务器端的问题。