【发布时间】：2014-09-01 21:53:36
【问题描述】：
我开发了一个响应式网站，就在我认为它完美并准备好发布时，我发现主页上的图像在 iPhone 上无法正常显示（我在 Android 上测试时开发了该网站，所以直到现在我对 iPhone 的怪事一无所知）。图像应该适合屏幕的宽度（我在它们上设置了 max-width: 100%;），但是它们被拉伸和像素化，超出了它们的实际分辨率。
奇怪的是，网站任何其他页面上的图像都可以正常显示。我认为问题的根源在于主页上的图像实际上是通过 CSS 背景属性设置的，而其他地方的图像是在 HTML 中的 <img> 标签中设置的。所以我注释掉了 CSS 文件中的“背景”声明，而是在主页上使用了<img> 标签，就像其他地方一样。当我对第一张图片这样做时，它显示得很好。但是，当我将其余的图像切换到 HTML 后，它们都恢复到之前存在的丑陋。
我的老板（可以使用 iPhone）给我发了这个视频（很抱歉，它失去了焦点，但你明白了）：https://www.youtube.com/watch?v=_vFJVZiBc3Q
他滚动过去的前四张图片应该都在折叠上方，而您只能看到实际图片左侧的约 1/10，这就是它被拉伸的程度。
我在这里没有想法。我需要为 iPhone 做些什么特别的事情吗？使用<img> 标签，这些照片的格式应该与其他工作图像的格式相同。
提前非常感谢！
【问题讨论】：
-
你的代码是.....
-
一切都与代码有关！有很多东西要检查，比如视口元元素等。这就像得到医生的诊断一样。你不会只是给他发视频。 :-)
-
我确实玩过视口元元素。目前它只是
<meta name="viewport" content="width=device-width" />，但添加 max-scale=1.0 并没有解决任何问题。这是一个 Wordpress 网站，但我只玩过 HTML/CSS 文件，据我所知，我在主页中声明<img>的方式与在主页中声明它们的方式没有区别网站的其余页面。还有其他我遗漏的相关信息吗？再次感谢！
标签： html css iphone mobile mobile-safari