meta "viewport" device-width: Opera Mobile 9.7上宽度偏小（10版正常）

Question

我目前的移动网络项目中使用元标签 "viewport" 来指示移动浏览器使用 1:1 的比例与设备的宽度：

<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这在IE移动版、iPhone Safari甚至Opera 10 beta上可行，但在默认安装了Opera 9.7的HTC HD2上不行。HTC HD2的设备尺寸为480x800，因此在纵向模式下，视口应该得到480的宽度。但显然Opera mobile 9.7（或者也可能是9.5）设置了错误的宽度，所以之后一切都会有点缩放。我使用了一个简短的javascript片段来检查实际的窗口大小：

$(window).width() -> 返回274
window.innerWidth -> 返回480

当我将"device-width"硬编码为480时，一切正常。横向模式同样如此：

$(window).width() -> 返回457
window.innerWidth -> 返回800

是否有任何解决方法？

问候

- Markus Wolters

---

我有一部HTC HD2手机，但宽度总是显示960！我尝试使用window.screen.width，但始终只得到480！而高度无论如何都是800，这是一个bug吗？！ - Ayyash

今天我尝试了：document.body.offsetWidth，在设置视口meta标签为240的同时，我得到了236！耶呜，但是除非页面为空，否则我仍然无法获得准确的高度值。 - Ayyash

今天我尝试了一些新的东西，用 C# 请求.Browser.ScreenPixelsWidth.ToString() 返回了 640！我以为我可以利用它来区分某些屏幕，但是算了！ - Ayyash

你是否在项目中添加了 mobile.browser 文件？此外，有一个新的 Mobile .NET MVC 替代方案取代了微软旧的移动端计划... - Jan de Jager

Jan，请给我一个那个.NET MVC的替代方案的链接，因为我现在正在大量使用MVC。 - Markus Wolters

Answer 1

我有点晚了，但是： viewport meta标签必须被视为CSS像素，而不是屏幕的物理像素。 它们之间的比率可以根据设备的物理像素密度而相差很大：

iPhone3：物理320x480px / CSS 320x480px => 比率=1，很容易。

iPhone4：物理640x960px / CSS 320x480px => 比率=2，这就是苹果在制作iPhone4时想到的，他们使像素大小减半，以便将针对3优化的站点在4上完全相同。

HTC Desire HD：物理480x800px / CSS 320x533px => 比率=1.5，这可能与您使用HTC HD2时的情况接近。

如果您在viewport中使用width=device-width值，则我的猜测是您不应该在设计中使用固定宽度，而是最好使用%宽度，记住在大多数（最近的）移动设备上，您的CSS总宽度将在1.0的缩放下约为320px（纵向）或500px（横向）。

- darma

Answer 2

我知道这是一个老问题，但它可能会帮助到某些人。 在这篇文章中，有一节关于Opera Mobile 9.7中viewport meta标签的支持： http://dev.opera.com/articles/view/opera-mobile-9-7-features-standards/ 属性user-scalable、minimum-scale和maximum-scale不被支持，但width、height和initial-scale应该是可以的。如果它不能很好地工作，您可以尝试使用CSS媒体查询。同一篇文章中有描述和示例。

- tagawa

Answer 3

请查看：http://www.quirksmode.org/mobile/viewports2.html，进入一个痛苦的世界 :)

- ghandi

Answer 4

看看PPK的Quirksmode.org移动站点。有大量信息，还有兼容性表格！

- cofiem

---

PPK证明了目前移动开发是一个巨大的痛苦 :) - Jethro Larson

Answer 5

你尝试过使用HandleFriendly标签吗？

适用于黑莓，并表示您已经为小屏幕设计了代码

- Ian

---

很确定你想说的是 HandheldFriendly。 - Jordan Reiter