iphone - Safari 100% 高宽异常

Question

我有一个 Logo ，我想使用媒体查询将其调整为全宽和相对高度，这在(几乎)除 Safari 之外的所有浏览器中都可以正常工作。

Safari 在整个屏幕上渲染图像，而不是保持纵横比。

我的 HTML

<div id="logo"><a href="http://www.stilundso.de/"><img src="http://lorempixel.com/output/technics-h-c-200-206-2.jpg" width="200" height="206"></a></div>

我的 CSS

div#logo {background:#fff; width:200px; border-right:1px solid #FFF; height:206px; position:absolute; top:0; left:0; padding-top:41px;}

@media only screen and (max-width:206px) {
    div#logo {display:block; position:static; padding:0; border-right:none; width:auto; height:auto;}
    div#logo img {height:100%; width:100%;}
}

这是一个 fiddle .

感谢任何帮助。

更新:

它现在可以在 Safari 上运行，但不能在我的 iPhone 3G 上运行。有什么想法吗？

Answer 1

改用 height:auto; 我发现效果一样好并且不会在 Safari 中导致此问题。