モバイル HTML に次のメタ タグを挿入しました。
<meta name = "viewport" content = "initial-scale = 1.0">
モバイル版用のcssファイルをコーディングした後、横幅のサイズが異なるため、横向きモードでは見栄えがよくないことに気付きました。右側に 160 ピクセルの空の領域が表示されます。
ランドスケープ モード用に個別の css ファイルを作成する以外に、これを回避する方法はありますか?
方向変更イベントもバインドする必要があります。次のサンプル スクリプトを使用して実行できます。
<script>
$(function(){
function orient() {
if (window.orientation == 0 || window.orientation == 180) {
$('.featured').css('display','none');
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
$('.featured').css('display','block');
orientation = 'landscape';
return false;
}
}
$(window).bind( 'orientationchange', function(e){
orient();
});
})();
</script>
css レイアウトが絶対値ではなく画面パーセントに基づいている場合、複数の css ファイルがなくても任意の画面レイアウトに調整できるはずです。
パーセント オプションを見てください: http://www.w3schools.com/cssref/pr_dim_width.asp
または、一定にしたいレイアウトがある場合は、それを中央に配置できます。
outise ラッパーを中央揃えにします。
body{
max-width:786;/*target size of page*/
margin:0 auto auto auto;
}
が最も簡単な方法です。
メディア クエリを使用して、向きの変化を検出し、それぞれに対して異なるスタイルをすべて同じスタイルシートで実行できます。
また、モバイルでは、幅に px ではなく % を使用することをお勧めします。モバイル Web アプリの CSS にはどの単位を使用しますか?
/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles */
}