屏幕分辨率≠浏览器窗口

当我 在 Twitter 上发布这条消息 并随后 发布这条消息 时，我收到了 这样的评论。该评论的观点非常合理。

我们经常讨论屏幕分辨率，但当考虑我们网站访问者可用的空间时，它并不是相关的数据。相关数据是 **浏览器窗口大小**。那么为什么我们经常讨论屏幕分辨率呢？可能是因为在全球最流行的分析软件 Google Analytics 中，这是唯一可以获得的数据。

(Google Analytics 团队 已经意识到这个问题)

那么，我们该怎么办呢？首先，开始测量浏览器大小。

但是，首先要说明一点。

如果我们能够了解访问者浏览器大小的所有数据。那么我们该如何利用这些数据？如果 @beep 教导了我们任何知识，那就是我们可以并且应该适应任何形状和大小的浏览器。

但是，拥有信息永远不是坏事。比我更聪明的人可能会看到我没有看到的东西，并根据这些数据想出合理的行动方案。

获取数据

由于 Google Analytics 目前无法帮助我们，我们需要在页面上运行一些 JavaScript 代码来获取数据。jQuery 可以轻松地测量大小，并进行 Ajax 调用以将数据 POST 到可以保存数据的脚本中。

$.ajax({
  type: "POST",
  url: "/savedata.php",
  data: {
    width        : $(window).width(),
    height       : $(window).height(),
    screen_width : screen.width,
    screen_height: screen.height
  }
});

现在，我们只需要那个脚本 savedata.php 准备好接收和保存数据。首先，我们需要一个数据库，所以这里是一个简单的数据库结构。

我不是 MYSQL 专家，但这是从 phpMyAdmin 导出结构后得到的。

CREATE TABLE `data` (
  `id` int(11) NOT NULL auto_increment,
  `width` int(11) NOT NULL,
  `height` int(11) NOT NULL,
  `screen_width` int(11) NOT NULL,
  `screen_height` int(11) NOT NULL,
  KEY `id` (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=72141 DEFAULT CHARSET=utf8 AUTO_INCREMENT=72141 ;

现在是我的超原始脚本，用于保存 POST 数据。

<?php

	$dbhost = 'localhost';
	$dbuser = 'db_user_name';
	$dbpass = 'db_password';
	
	$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
	
	$dbname = 'db_name';
	mysql_select_db($dbname);
		
	$width         = mysql_real_escape_string($_POST['width']);
	$height        = mysql_real_escape_string($_POST['height']);
	$screen_width  = mysql_real_escape_string($_POST['screen_width']);
	$screen_height = mysql_real_escape_string($_POST['screen_height']);
	
	$sql = "INSERT INTO data ( width,  height,  screen_width,  screen_height)
	      VALUES           ($width, $height, $screen_width, $screen_height)";
	
	if (!mysql_query($sql, $conn)) {
		die("Error:" . mysql_error());
	}
	
	echo "1 Record Added";
		
	mysql_close($conn);

?>

这是我在 CSS-Tricks 上一天所做的事情。如果你想了解，这里有 我收集的完整数据（以 SQL 格式呈现）。

查看结果

请记住： 所有这些数据都是从 css-tricks.com 收集的。所以，这只是一堆设计师极客，可能。它只与这个网站和具有非常相似受众的网站相关。

首先，是无聊的屏幕分辨率数据。我通过查询 500 个随机数据样本，并将大小相同的 div 层叠在一起，并使用尽可能浅的灰色来获得这些数据。巧合的是，它使用的是 rgba(0,0,0,0.004)，因为 rgba(0,0,0,0.003) 是纯白色（很奇怪）。

注意这些相当明显的线条。显示器只有这么多种尺寸。这很有道理。但当我们对浏览器窗口大小做同样的事情时，就会发生以下情况。

变得更加模糊。这也有道理。即使在我写这篇文章的时候，我的浏览器也处于某种非常随意的尺寸，可能约为我屏幕分辨率的 80%。点击上面的图片可以查看更大的图片。你会注意到，在浏览器大小版本中，任何可见的硬边都比屏幕大小版本窄 20 像素。很有趣。

如果我将屏幕大小着色为红色，将浏览器大小着色为绿色，并将它们叠加在一起，就会得到以下结果。

注意，在外部边缘，着色保持红色。很少有人使用非常宽的显示器，并且将其浏览器窗口打开到那么宽。我知道我自己没有这样做。让我们看看“全屏”浏览器的统计数据。有多少人以全屏模式或以某种方式将其浏览器窗口“最大化”来浏览？好吧，如果你只查询窗口和屏幕分辨率完全相同的条目，就会发现很少人，不到 1%，但这很有趣。

完全全屏	0.85%
在全屏 50 像素范围内	1.06%
在全屏 100 像素范围内	9.67%
在全屏 200 像素范围内	61.18%

所以很少有人使用全屏模式浏览，但大多数人使用接近全屏模式的尺寸浏览。推测一下，Windows 用户可能是使用全屏模式浏览的人，因为这在该操作系统上是更自然的习惯。但现在 “全屏”在 OS X Lion 中是一个大事件，也许这将开始影响这些东西。

如果我们将这些内容分成几部分并使用整个数据集，这里有一种分解方法。

宽度范围	浏览器窗口	屏幕分辨率
0px – 500px	1.13%	1.02%
501px – 800px	2.01%	1.06%
801px – 1000px	2.84%	0.07%
1001px – 1200px	14.91%	6.86%
1201px – 1400px	40.65%	35.57%
1401px – 1600px	17.38%	17.17%
1601px – 2000px	20.41%	34.34%
2000px+	0.66%	3.91%

那么移动设备在其中扮演什么角色呢？尽管移动浏览量大幅增长的报告很多，但我毫不怀疑，CSS Tricks 的移动流量非常少。

让我们总结一下一些要点。

• 最流行的屏幕分辨率是 1680 x 1050，几乎 13% 的访问者使用这种尺寸的显示器。
• 可以预见，没有一种浏览器窗口尺寸远远超过其他尺寸，但排在首位的是 1349 x 667，占 0.75% 的访问量。
• 最流行的屏幕分辨率比例是 16:10，占 46% 的访问量。可能是因为很多视频都是 16:9，而显示器制造商希望人们能够观看这些视频，但仍然有空间用于一些操作系统 chrome？16:9 排在第二位，占 29%，5:4 占 12%，4:3 占 8%。
• 所有这些比例都比高更宽。事实证明，只有 2% 的访问者使用屏幕高度比宽度高（或者至少报告为这样）。
• 实际的浏览器窗口也往往比高更宽，只有 3% 的访问量具有高度比宽度高的尺寸。
• 每个屏幕的平均像素数 = 1,539,515
• 平均屏幕分辨率 = 1526 x 967
• 平均浏览器窗口大小 = 1366 x 784

衷心感谢

感谢 Rentedsmile Web Design 的 Jamie Bicknell 帮助我整理了使用这些数据所需的 MYSQL 查询和 PHP 代码。