div在iOS中的窗口外拉伸答案

【问题标题】：Div stretching outside window in iOSdiv在iOS中的窗口外拉伸
【发布时间】：2014-07-17 18:53:07
【问题描述】：

好的，

所以我有一个通过 Css 设置为 100% 宽度的 Div（宽度：100%;）。在网络浏览器中显示正常。在 iPhone 上（在 Safari 和 Chrome 中）它挂在屏幕上，但有很多像素（几百个）。当设置为 100% 宽度时，Android 手机似乎可以将 div 放入屏幕。

我基本上只是希望我的 div 适合它所在的任何容器，但我认为出于某种原因 iFrame 在 iOS 上拉伸它。

我尝试设置一个固定宽度来测试（例如宽度：10px;），这反映在网络浏览器中，但在 iOS 中它始终是相同的宽度......我尝试在 CSS 中使用@media，但宽度不会改变。

我还尝试添加以下元标记：

并添加了一个固定的css并应用于div...仍然没有改变宽度..

我尝试删除 div，只有一个 10px 的 iframe，这反映在我的笔记本电脑上，但在 ios 中它仍然非常宽...

我会尝试提供一些截图来说明我的意思，你也可以随意访问我正在谈论的页面，但是，你可能需要加入测试：http://www.ozesports.net.au/chat

我已经为以下图片发布了一个相册，因为我目前只能发布 2 个链接： http://imgur.com/a/q9wcM

笔记本电脑上的页面 (Google Chrome) 第一张图片

iOS 上的页面 (Safari) 第二张图

iOS 上的页面，我捏拉缩小，以便您可以看到它悬在上面 (Safari) 第三张图片

Android 页面第四张图片

我真的被困住了，如果你需要我澄清什么，请告诉我..

谢谢！

【问题讨论】：

【解决方案1】：

尝试使用媒体查询

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 
     width: 100%;
}

【讨论】：

我添加了：@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { #ozechat {border-style:solid;溢出：自动； -webkit-溢出滚动：触摸； } } div 似乎大小合适，适合 ios 屏幕，但 iframe 仍然超长，它现在只允许您水平滚动...：/ 所以我的 css 选择器适用于 iphone，我只需要找出如何强制我的 iframe 的宽度
我发现我有一些内联样式将 iframe 设置为 4800 像素宽，因此会发生这种情况。使用内联样式有助于调整 iframe 大小