使简单布局适应 Safari Mobile (iPhone) 的 CSS 技巧

Question

我有这个非常简单的结构：

<div id="header">
  <h1>Title</h1>
</div>
<div id="content">
  <ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>...</li>
  </ul>
  <div id="stuff">
    <p>Other stuff in the content</p>
  </div>
</div>
<div id="menu">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>...</li>
  </ul>
</div>

我希望只有一个样式表有这种行为： 当浏览器分辨率很大时，我想在#content 的右侧显示#menu。如果不是，它可以在下面。 所以我尝试了这个：

#content
{
  float:left;
  width:70%;
}
#menu
{
  width:300px;
  float:left;
}

它非常有效，但在 iPhone 上，#content 太大，左侧有很多空白区域。 我真的希望屏幕尽可能适合#content（#stuff 不是很大）。

你们中的任何 CSS ninjas 都知道如何做到这一点？

非常感谢。

朱利安

Answer 1

了解如何为移动设备（尤其是 iPhone！）制作更好的布局：
https://www.w3schools.com/css/css_rwd_viewport.asp

在这个网站上，他们解释了手持设备的 viewport 属性...因此您可以设置视口的宽度，这样您的设计在 iPhone 上的正常工作就会容易得多。