元“视口”设备宽度：Opera Mobile 9.7 上的错误宽度小（10 个作品）答案

【问题标题】：meta "viewport" device-width: Wrong width small on Opera Mobile 9.7 (10 works)元“视口”设备宽度：Opera Mobile 9.7 上的错误宽度小（10 个作品）
【发布时间】：2010-12-30 18:56:33
【问题描述】：

对于我当前的移动网络项目，我使用元“视口”标签来指示移动浏览器使用 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 mobile、iPhone Safari 甚至 Opera 10 beta，但不适用于 Opera 9.7，它默认安装在 HTC HD2 上。 HTC HD2 的设备尺寸为 480x800，因此在纵向模式下视口的宽度应为 480。但显然 Opera mobile 9.7（也许还有 9.5）设置了错误的宽度，所以之后一切都被放大了一点。我使用了一个简短的 javascript sn-p 来检查实际的窗口大小：

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

当我硬编码 480 而不是“设备宽度”时，一切正常。横向模式也一样：

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

有什么解决方法吗？

问候

【问题讨论】：

我有一个 htc hd2，但我总是得到 960 的宽度！我试过window.screen.width，我总是得到480！无论如何高度总是800，这是一个错误吗？！
今天我尝试：document.body.offsetWidth 同时将视口元标记设置为 240，我得到了 236！是的，但除非页面为空，否则我仍然无法获得准确的高度值
我今天尝试的新东西，在 C# Request.Browser.ScreenPixelsWidth.ToString() 中返回 640！我想我可以用它来区分某些屏幕，但是不！
您是否将 mobile.browser 文件添加到您的项目中？此外，还有一个新的 Mobile .NET MVC 替代方案取代了 Microsoft 的旧移动计划......
Jan，您能否给我一个指向该 .NET MVC 替代方案的链接，因为无论如何我现在都在大量使用 MVC。

标签： windows-mobile opera mobile-website

【解决方案1】：

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

【讨论】：

【解决方案2】：

我对此有点晚了，但是：视口元标记必须被视为 CSS 像素，而不是屏幕的物理像素。并且就设备的物理像素密度而言，它们之间的比例可能会有很大的不同：

iPhone3 : 物理 320x480px / CSS 320x480px => ratio = 1，简单。

iPhone4 : 物理 640x960px / CSS 320x480px => ratio = 2，这就是 Apple 在 iPhone4 中将像素缩小两倍以保持针对 3 优化的网站在 4 上工作完全相同时所考虑的。

HTC Desire HD：物理 480x800px / CSS 320x533px => ratio = 1.5，这可能与您在使用 HTC HD2 时所体验到的差不多。

如果您对视口使用 width=device-width 值，我的猜测是您不应该在设计中使用固定宽度，但最好使用 % 为单位的宽度，请记住，在大多数（最近的）移动设备中在 1.0 比例下，您的 CSS 总宽度将在 320 像素（纵向）或 500 像素（横向）左右。

【讨论】：

【解决方案3】：

我知道这是一个老问题，但它可能会对某人有所帮助。在本文中，有一节介绍了 Opera Mobile 9.7 中对视口元标记的支持： http://dev.opera.com/articles/view/opera-mobile-9-7-features-standards/ 不支持 user-scalable、minimum-scale 和 maximum-scale 属性，但应该支持 width、height 和 initial-scale。如果效果不佳，您可以随时尝试使用 CSS 媒体查询。在同一篇文章中有描述和示例。

【讨论】：

【解决方案4】：

查看 PPK 的 Quirksmode.org 移动网站。大量信息，以及兼容性表！

【讨论】：

PPK 证明移动设备是目前开发的巨大痛苦 :)

【解决方案5】：

你尝试过 HandleFriendly 标签吗？

在 BB 上工作并表明您已经为小屏幕设计了代码

【讨论】：

很确定您的意思是 HandheldFriendly。