屏幕分辨率≠浏览器窗口-CSDN博客

当我啾啾这再跟进这个，我的意见是这样。该评论有一个完全正确的观点。

我们经常谈论屏幕分辨率，这在考虑我们网站的访问者可以使用的空间时并不是相关的统计数据。相关统计数据是浏览器窗口大小 。那么，为什么我们要这么多谈论屏幕分辨率呢？可能是因为在世界上最受欢迎的分析软件Google Analytics中，它是您获得的唯一数据。

（Google Analytics（分析）小组意识到了这一点）

因此，我们该怎么办？好吧，开始测量浏览器的大小。

但首先，一个字。

如果我们找到有关访问者浏览器大小的各种数据该怎么办。有了这些数据该怎么办？如果@beep 教给我们任何东西，那就是我们可以并且应该适应任何形状和大小的浏览器。

但是，拥有信息绝不是一件坏事。比我聪明的男人和女人可能会看到我看不到的东西，并根据这些数据考虑采取合理的措施。

获取数据

由于Google Analytics（分析）目前无法为我们提供帮助，因此我们需要自己在页面上运行一些JavaScript才能获取数据。 jQuery使测量尺寸以及make和Ajax调用变得容易，以将数据发布到可以保存数据的脚本中：

$.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％。单击上面的图像以查看更大的图像。您会注意到，无论浏览器尺寸版本中有哪些可见的硬边，它们都比对应的屏幕尺寸窄20px。有趣。

如果我将屏幕的颜色设置为红色，将浏览器的颜色设置为绿色，然后将它们放在一起，则可以得到以下信息：

请注意，在外侧边缘上，色调保持红色。拥有非常宽的显示器的人并不多，他们的浏览器窗口可以打开那么宽。我知道我不知道让我们看一下“全屏”浏览器的统计信息。可以说有多少人全屏浏览器，或者浏览器窗口“最大化”。好吧，如果您仅查询窗口和屏幕分辨率完全相同的条目，则很少，少于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％
2000像素以上	0.66％	3.91％

那么，这一切在哪里呢？尽管有报道称移动浏览量大幅度增长，但我对此毫不怀疑，但CSS Tricks的移动流量却很少。

让我们用一些快速点击来结束它：

最受欢迎的屏幕分辨率是1680 x 1050，几乎有13％的访问者使用了该尺寸的显示器。
可以预见，没有一个浏览器窗口的大小可以远远超过所有其他浏览器，但是领先的是1349 x 667，占访问量的0.75％。
最受欢迎的屏幕分辨率比率是16:10，其中46％的访问者具有该比率。也许是因为很多视频是16：9的，并且显示器制造商希望人们观看，但是仍然有一些OS chrome的空间？接下来是16：9（29％），5：4（12％）和4：3（8％）。
所有这些比率都比高大。事实证明，只有2％的访客的屏幕比宽高（或至少以这种方式报告）高。
实际的浏览器窗口通常也比宽大，只有3％的访问所具有的尺寸大于宽。
每个屏幕的平均像素数= 1,539,515
平均萤幕解析度= 1526 x 967
浏览器平均窗口大小= 1366 x 784