javascript - 同じ HTML ページの横長と縦長のデザイン

Question

Web アプリ用に 2 つのバージョン (たとえば、1 つの HTML ページのみ) を作成する必要があります。しかし、iPad で通常行うように、これらの両方を実行する必要があります。縦向きモードの場合は縦向きバージョンが機能し、モードが横向きの場合は横向きバージョンが機能します。

これどこかで読んだけどよくわからない。1つのHTMLファイルと2つのCSSファイルでアプリケーションを作成できますか?

Answer 1

Google のレスポンシブ Web デザインをチェックしてください。私のアプリケーションは Twitter の Bootstrap プロジェクト を使用していますが、その方法は非常に明白です: デバイスの現在の幅に基づいて CSS を定義します。幅が変わり、CSSが変わります。

http://twitter.github.com/bootstrap/scaffolding.html#responsive

CSS3 とメディア クエリについては、次の記事を参照してください。

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

次のようになります。

/* iPads (landscape-wide) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

 /* iPads (portrait-tall) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

研究開発は必要ですが…

お役に立てれば