モバイルでウェブページの向きをポートレートからランドスケープに変更すると正しく表示されます。しかし、再度風景からポートレートのアラインメントに変更することは正しくありません。デバイスの向きを変更するときにCSSが失敗する
私はこのようなmetaタグを使用しています：
<meta name="viewport" content="width=device-width, maximum-scale=2.0, initial-scale=1, minimum-scale=1.0, user-scalable=yes, shrink-to-fit=no">
ランドスケープモード幅を適用する際にはメタタグに=デバイスの高さを幅するために変更されていることを私が発見しました。しかし、もう一度私が肖像画の方向に向いている場合、幅はメタタグの幅=デバイス幅に変化していないので、width = device-heightのままです。この問題を解決するにはどうすればよいですか？
フォントサイズなどの例外的なケースでは、EMまたはPXを使用することができます。
私はあなたが2つのスタイルシート、肖像画用と景観のための1つのいずれかにリンクまたは私は両方が含まれているが、どちらかが行います次の例ではオリエンテーション
を使用してメディアクエリを使用してスタイルを定義すべきだと思います。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" media="all and (orientation:portrait)"src="portrait.css">
<!---portrait css contains @charset "utf-8";
img{width:400px;}--->
<link rel="stylesheet" media="all and (orientation:landscape)" src="landscape.css">
<!---landscape.css contains @charset "utf-8";
img{width:600px;}---->
<title>Simple orientation trial (view on device)</title>
<style>
img{max-width:400px;}
@media all and (orientation:portrait) {
img{max-width:400px;}
}
@media all and (orientation:landscape) {
img{max-width:600px;}
}
</style>
</head>
<img src="http://www.rachelgallen.com/images/daisies.jpg">
<body>
</body>
</html>このページはhttp://rachelgallen.com/imageorientation.htmlに掲載されています –
私のウェブサイトは1000のCSSクラスを含む8つのスタイルシートを持っています。ポートレートモードとランドスケープモードのすべてのクラスを変更する必要がありますか？ – prisel
@Padmapriyaメディアクエリを使って行う方がよいですか、ブートストラップなどを使用することを検討しましたか？ –
これはただのウェブサイトやPhoneGapのようなモバイルアプリですか？ – Randy
ウェブサイト – prisel