iPad/iPhone 上的 CSS 问题

Posted 2023-03-12

【中文标题】iPad/iPhone 上的 CSS 问题

【英文标题】：CSS Issue on iPad/iPhone

【发布时间】：2013-10-09 19:29:10

【问题描述】：

我在 CSS 方面拥有丰富的经验，但我无法弄清楚我正在开发的这个网站是怎么回事：

http://lockwoodstorage.com/

在所有浏览器上一切都很好，但在 iPhone 和 iPad 上，内容背景在左侧被截断。我尝试了媒体查询，并尝试在浏览器中找到可能导致此问题的容器，但我似乎无法弄清楚。

我知道这是一个非常基本的问题（我总是使用 Stack Overflow 作为最后的手段）但也许这里有一个我不精通的问题（这可能会在未来的论坛中有所帮助；我会如果问题更复杂，请更新问题）。任何想法将不胜感激。谢谢！

编辑

仅供参考，我不是想让这个网站响应。我只是想让它在 iPhone 和 iPad 上正确显示。我还看到了一个问题，即由于某种原因，ios 上的加载时间非常慢。

将这个网站放在一起时，我使用了二十一十二主题，并根据自己的喜好对其进行了定制。这不是一个响应主题，只是一个基本主题。

我已经为此提供了赏金。有它！感谢您的帮助。

【问题讨论】：

能否请您展示您的问题的图片以及预期解决方案的另一张图片。我，也许还有其他人，没有 iPhone 或 iPad 可供测试。

更新：我看到#page 的最大高度为 485 像素，这会导致蓝色背景在移动设备上变小，露出它背后的条纹背景。你是这个意思吗？如果是这样，请将 max-height: 485px 更改为 min-height: 485px，或者可能更小，因为看起来您在其中的图片高度不是 485px。

【参考方案1】：

在您的标题中，您使用的是导致此问题的 CSS float:left 属性。只需删除此 CSS 属性，您的问题就会得到解决。

然后，如果您想在标题中将元素浮动到左侧，您可以通过定位每个单独的元素来实现。举例

#logo, #nav

 float:left;
 

另外，@<div id=page> 将 max-height 更改为 min-height ，你们都准备好了。希望对你有帮助。

【参考方案2】：

你必须在max-height:485px的地方使用min-height:485px

【参考方案3】：

如果您要使网站具有响应性，则应首先将其构建为移动设备。这样，您就可以根据设备设置每个元素的样式，以使其正确显示，同时为更大的设备添加断点。

目前，您似乎已经为桌面构建了网站，然后添加了一些媒体查询来重新定位元素以尝试使其适合。这将为您创造更多的工作，并且肯定会令人沮丧。

如果您希望网站在所有设备上都看起来不错，我建议您从移动设备开始并重新设置样式，然后逐步升级到平板电脑和桌面设备。

【讨论】：

我基于一个 WordPress 模板。我没有添加查询，我只是使用现有的。该网站不是响应式的，我只需要它在移动设备上正确显示，但事实并非如此。你看到这个问题了吗？

在这种情况下，我认为您可以删除文档头部的媒体查询和视点。然后桌面版本应该会显示在移动设备上。

【参考方案4】：

Mx 我也同意大卫的观点。您应该首先在移动设备上开发它，因为如果您在许多地方遇到问题，您尝试为移动设备定制它的方式将花费大量时间和精力。

如果您在少数地方遇到问题，您可以通过放置媒体查询、宽度和高度的百分比而不是固定值来解决。同样，您可以在需要时使用 em 代替像素。

但是，正如我之前提到的，这将需要更多时间来定制。所以，我建议使用 Zurb Foundation 或 Twitter Bootstrap。