屏幕分辨率和浏览器分辨率的区别答案

【问题标题】：Difference between screen resolution and browser resolution屏幕分辨率和浏览器分辨率的区别
【发布时间】：2013-03-16 16:39:04
【问题描述】：

iPhone 4s 的分辨率为 640 x 960 像素，但当http://www.whatismyscreenresolution.com/ 显示为 320 x 480 像素时。谁能描述一下这个区别？

【问题讨论】：

标签： iphone resolution

【解决方案1】：

当然，网站实际上并不知道您设备的物理分辨率。它通过 JavaScript 要求操作系统检索分辨率。在 iOS 上，这有点奇怪：所有与图形相关的框架和库都以“点”为单位测量大小，在非视网膜设备上一个点是一个像素，但 在视网膜设备上一个点是两个像素。

例如，如果您向UIKit 询问相同的内容，您将得到相同的结果。在 iPhone 4 和 4S 上，[[UIScreen mainScreen] bounds].size 也将返回 320 x 480 - 以磅为单位的大小。

在 JavaScript 中，您可以通过乘以 window.devicePixelRatio 属性来获得正确的分辨率：

var scale = window.devicePixelRatio;
window.alert(screen.width * scale + "px x " + screen.height * scale + "px");

在原生代码中，可以通过乘以[UIScreen mainScreen].scale得到物理尺寸：

CGSize size;
size.width = [UIScreen mainScreen].scale * [UIScreen mainScreen].bounds.size.width;
size.height = [UIScreen mainScreen].scale * [UIScreen mainScreen].bounds.size.height;
NSLog(@"%@", NSStringFromCGSize(size));

另外，您要求使用 CSS3 媒体查询来检测 Retina 显示器：

<link rel="stylesheet" type="text/css" href="foo.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

【讨论】：

这种像素加倍是否发生在所有其他具有高 ppi 的小型设备中？
你知道CSS3媒体查询是如何检测设备分辨率的吗？
所以如果我们使用 maxWidth=100% 或 maxHeight=100% 不是使用 960x640，而是使用 480*320？
有没有办法关闭这种行为，在视网膜设备上设置“一个点=一个像素”？也许一些特殊的元标记？

【解决方案2】：

分辨率为 640 x 960 像素，分辨率为 320 x 480 点。这与 Retina 显示屏有关。在 Retina 显示器上，每点有 4 个像素 (2x2)，而在普通屏幕上，每点只有 1 个像素。

【讨论】：

【解决方案3】：

首先是屏幕分辨率每个现代 LCD 屏幕都使用像素（即微小的方形或矩形点）来显示屏幕信息（文本、图片等）。每个显示器都有一个分辨率，即像素的度量。通常分辨率显示为“640×480”，这意味着有 640 像素，向下 480 像素。将这些数字相乘，您将得到像素总数。有一组标准分辨率，由一系列字母指定，例如 VGA、WVGA、XGA 等

一种分辨率比另一种更好吗？这取决于。作为一般规则，如果您查看两个相同尺寸的屏幕，其中一个的分辨率比另一个高，则分辨率较高的屏幕看起来会更清晰，因为它有更多的像素构成您看到的图像。但是，除非对系统字体大小进行了更改，否则所述高分辨率屏幕上的文本会显得更小。 HTC 已确保在其所有更高分辨率的设备（如 Touch Diamond、Pro 和 HD）上提高系统字体大小，以提高可读性，The best way to describe the difference b/w screen and browser resolution 可以理解的简单人@

【讨论】：

【解决方案4】：

报告比较

浏览器宽度/高度和显示器分辨率：这些报告不一样，因为浏览器宽度/高度只是浏览器窗口中的可视区域。显示器分辨率是整个屏幕，与滚动条或浏览器窗口大小无关。点击以下按钮查看您的浏览器宽度/高度和显示器分辨率：

Test Resolutions

浏览器宽度/高度和屏幕宽度/高度：这些报告相互排斥，因为浏览器宽度/高度专门针对非移动设备，而屏幕宽度/高度专门针对移动设备。显示器分辨率和屏幕尺寸：虽然这两个报告在本质上显示相同的东西，但它们也是相互排斥的。 Monitor Resolutions 报告专门用于非移动设备，Screen Size 报告专门用于移动设备。

在线工具

浏览器宽度：浏览器可视区域的宽度（以像素为单位）。它考虑了滚动条，并且会在窗口大小发生变化时发生变化。这个数字是使用 IE 的 javascript 方法 document.body.offsetWidth 和所有其他浏览器的 window.innerWidth 计算的。

浏览器高度：浏览器可视区域的高度（以像素为单位）。它考虑了标题栏和书签栏，并且可以在更改窗口大小时进行更改。这个数字是使用 IE 的 javascript 方法 document.body.offsetHeight 和所有其他浏览器的 window.innerHeight 计算的。

显示器分辨率：整个显示器的宽度和高度（以像素为单位），与浏览器大小无关。它是使用 javascript 方法 screen.width 和 screen.height 计算的。

屏幕尺寸：仅用于移动报告。它基于移动设备的用户代理字符串，其中引用了一个查找表，其中包含每个设备的屏幕尺寸。

屏幕宽度：仅用于移动报告。与屏幕尺寸相同，只是此报告仅引用设备的屏幕宽度。

屏幕高度：仅用于移动报告。与屏幕尺寸相同，只是此报告仅引用设备的屏幕高度。

【讨论】：