2

私は一日中この問題を理解しようとしてきましたが、まだそれを理解していません：

私はこれらの3つのcssファイルが欲しいです：

  • lowerThan960pxForDesktop.css（流動的なレイアウト用）
  • MobileLandscape.css（iphone 960px android 800pxなど）

  • MobilePortrait.css（iphone 640px android 480pxなど）

  • Lanscape.cssがdesktop.cssを使用するようにしたい

  • Portrait.cssでdesktop.csとLandscape.cssの両方を使用するようにしたい

メディアクエリまたはjavascriptを使用して、それを正しく行うためにHTMLをどのように表示する必要がありますか。私はこれを何度も経験しましたが、何かがうまくいかないたびに（デスクトップが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 デスクトップなどになります)。

メディアクエリ 101:

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

メディア クエリの豊かな世界の詳細については、こちらをご覧ください。

また、条件付きの IE コメントを使用して、古い IE からメディア クエリを隠し、1 種類の CSS だけを使用できるようにすることもお勧めします。

編集：ああ、問題を理解しました-さまざまなiPhoneの状況でさまざまなcssを使用する必要があります..jquery mobileを使用して、縦から横への変更に応じてcssクラスの変更をバインドできます。

お役に立てれば

于 2011-11-28T19:01:13.823 に答える