2

我整天都在试图解决这个问题，但还没有得到它：

我想要这 3 个 css 文件：

  • lowerThan960pxForDesktop.css（用于流体布局）
  • MobileLandscape.css（iphone 960px android 800px 等）

  • MobilePortrait.css（iphone 640px android 480px 等）

  • 我希望 Lanscape.css 将使用 desktop.css

  • 我希望 Portrait.css 将同时使用 desktop.css 和 Landscape.css

我的 HTML 应该是什么样子才能做到这一点 - 使用媒体查询或 javascript。我已经经历了很多时间，每次出现问题时（桌面获取 mobile.css 或 iphone 读取 Portrait.css，即使它处于横向模式等）。

4

1 回答 1

1

也许 Iphone 问题与已知的视口宽度问题有关？通过将其添加到 html 来解决。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

除此之外使用媒体查询来调用css。并在 css 文件中调用 @import 来调用引用 css 文件（例如景观将 @import desktop 等）

媒体查询 101：

<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >

以及有关丰富的媒体查询世界的更多信息。

还建议使用条件 IE 注释来隐藏旧 IE 的媒体查询，并让它只使用一种 css

编辑：啊我现在明白了这个问题 - 你需要在不同的 Iphone 情况下使用不同的 css .. 你可以使用 jquery mobile 并根据从纵向到横向和返回的变化绑定一个 css 类更改。

希望这可以帮助

于 2011-11-28T19:01:13.823 回答