元“视口"设备宽度:Opera Mobile 9.7上的宽度错误小(10个作品) [英] meta "viewport" device-width: Wrong width small on Opera Mobile 9.7 (10 works)
问题描述
对于我当前的移动Web项目，我使用meta"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，Opera 9.7默认情况下安装在HTC HD2上. HTC HD2的设备尺寸为480x800，因此在纵向模式下，视口的宽度应为480.但显然Opera Opera 9.7(也许还有9.5)设置了错误的宽度，因此此后一切都放大了一点.我使用了一段简短的javascript代码片段来检查实际的窗口大小:
$(window).width()->返回274
window.innerWidth->返回480
当我硬编码480而不是"device-width"时，一切正常.同样适用于横向模式:
$(window).width()->返回457
window.innerWidth->返回800
有什么解决方法吗?
问候
我在这方面有点迟了，但是: 视口meta标签必须被视为CSS像素，而不是屏幕的物理像素. 并且在设备的物理像素密度上，它们之间的比率可能会大不相同:
iPhone3:物理尺寸320x480px/CSS 320x480px =>比率= 1，简单.
iPhone4:物理640x960px/CSS 320x480px => = = 2，这就是Apple在将iPhone4中的像素缩小两倍时，以使针对3进行优化的网站在4上的工作方式完全相同的想法.
HTC Desire HD:物理480x800px/CSS 320x533px =>比率= 1.5，这可能与您使用HTC HD2所经历的差不多.
如果您在视口中使用width = device-width值，那么我猜您不应该在设计中拥有固定的宽度，而要记住在大多数(最近)移动设备中，最好以％为单位使用宽度设备的CSS总宽度将以1.0的比例在320px(纵向)或500px(横向)左右.
For my current mobile web project I use the meta "viewport" tag to instruct the mobile browser to use a scale of 1:1 with the devices' width:
<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" />
This works on IE mobile, iPhone Safari and even on Opera 10 beta, but it doesn't on Opera 9.7, which is by default installed on HTC HD2. The HTC HD2 got device dimensions of 480x800, so the viewport should get a width of 480 in portrait mode. But appearently Opera mobile 9.7 (and perhaps 9.5 too) sets a wrong width, so after that everything is zoomed in a little. I used a short javascript snippet to inspect the actual window size:
$(window).width() -> returns 274
window.innerWidth -> returns 480
When i hardcode 480 instead of "device-width" everything works correct. Same here for landscape-mode:
$(window).width() -> returns 457
window.innerWidth -> returns 800
Is there any workaround for this?
Greetings
i'm a little late on this but : the viewport meta tag has to be considered as CSS pixels, not physical pixels of your screen. and the ratio between them can be quite different regarding the physical pixel density of the device :
iPhone3 : physical 320x480px / CSS 320x480px => ratio = 1, easy.
iPhone4 : physical 640x960px / CSS 320x480px => ratio = 2, that's what Apple thought of doing when they made pixels twice smaller in the iPhone4 in order to keep sites optimized for 3 working exactly the same on 4.
HTC Desire HD : physical 480x800px / CSS 320x533px => ratio = 1.5 which is probably something near what you're experiencing with HTC HD2.
if you use the width=device-width value for the viewport, my guess is you shouldn't then have a fixed width in your design, but better use widths in %, having in mind that in most (recent) mobile devices your CSS total width will be somewhere around 320px (portrait) or 500px (landscape) at a scale of 1.0.
这篇关于元“视口"设备宽度:Opera Mobile 9.7上的宽度错误小(10个作品)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
