Question

网络服务器希望从浏览网页的每个手机获取屏幕尺寸等信息。 Javascript函数screen.width和screen.height返回非常不准确的值。

网络服务器是否有办法检测手机的屏幕尺寸？客户端浏览器是Android上的webkit。

Answer 1

您可以尝试使用CSS媒体查询，希望使用正确的值。

<link rel="stylesheet" type="text/css" 
media="only screen and (min-device-width: 320px)" 
href="logResolutionScript?width=320" />

对其他宽度和高度使用基本相同的规则，并使用cookie检查客户端是否加载了多个样式表以获取正确的值。你不会得到确切的分辨率，但它应该足够接近。您还可以检查方向并使用max- / min-（设备）-width的组合。您的文件可能会导致相当多的css-imports，但您应该能够非常准确地确定客户端的分辨率，不幸的是，这会以一些HTTP请求为代价。

CSS3 Media Queries (Specification)

Answer 2

我发现this article很有用，它提到了一个影响Android和iPhone浏览器的元标记，它做了我需要的工作：

<meta name="viewport" content="initial-scale=1.0">

来自Mislav的文章：默认情况下Mobile Safari的功能（即没有此指令）显示缩小的980px宽版本的页面即使布局本身较窄。作为内容作者，通过这个指令我们说“相信我，放大到自然规模，我会确保它适合”

从JavaScript读取时，似乎使屏幕大小和宽度值正确，因为页面没有缩放（如果页面较大，您仍然可以滚动它）。或者，可能有一个javascript变量来读出缩放级别。

对于iPhone，这是documented here。

Answer 3

在Android上，您可以通过向宽度为100％的正文添加绝对div并将div的offsetWidth除以window.innerWidth来计算当前缩放。

var iPadMeasureWidthNode = window.iPadWNode;
if (!iPadMeasureWidthNode) {
    iPadMeasureWidthNode = window.iPadWNode = document.createElement('div');
    // .ipad-measure-w {position:absolute; width:100%; top:-1px}
    iPadMeasureWidthNode.className = 'ipad-measure-w';
    document.body.insertBefore(iPadMeasureWidthNode, document.body.firstChild);
}
var zoominverse = 1000 / Math.round(1000 * iPadMeasureWidthNode.offsetWidth / window.innerWidth);

通过反转（撤消）缩放量，可以使元素保持1：1缩放：

// Not using scale3d because is hardware zooming which is ugly unreadable blurry pixel magnification.
node.style.webkitTransform = (zoominverse > 1) ? 'scale(' + zoominverse + ')' : '';
node.style.webkitTransformOrigin = (zoominverse > 1) ? '0 0 0' : '';

window.onresize事件检测到缩放更改（尽管调整大小事件延迟到调整大小完成后...您可以使用iPad上的gesturestart事件检测缩放开始，或document.touchstart事件并检测到2个手指。）

编辑：在三次更正后说它不起作用，我想我最好添加一个显示它工作的例子。测试工作原理：Android 4.1.2普通浏览器，Android 4.1.2 Chrome，Android Opera Mobile 12.10，iPad 2 iOS4。（在Android Firefox Mobile上无法使用，并且无法在iframe中使用，因此jsfiddle无效）。

<!DOCTYPE html>
<html>
<head>
<style>
.ipad-measure-w {
    position: absolute;
    width: 100%;
    top: -1px;
};
</style>
</head>
<body>
<button onclick="alertWidth()">alertWidth</button>
<div style="width: 1600px;  height: 100px; background-color: blue;"></div>
<script>
function alertWidth() {
    var iPadMeasureWidthNode = window.iPadWNode;
    if (!iPadMeasureWidthNode) {
        iPadMeasureWidthNode = window.iPadWNode = document.createElement('div');
        iPadMeasureWidthNode.className = 'ipad-measure-w';
        document.body.insertBefore(iPadMeasureWidthNode, document.body.firstChild);
    }
    var zoominverse = 1000 / Math.round(1000 * iPadMeasureWidthNode.offsetWidth / window.innerWidth);
    alert(zoominverse);
}
</script>
</body>
</html>

Android如何从webkit浏览器嗅探屏幕大小？

3 个答案: