0

モバイル HTML に次のメタ タグを挿入しました。

 <meta name = "viewport" content = "initial-scale = 1.0">

モバイル版用のcssファイルをコーディングした後、横幅のサイズが異なるため、横向きモードでは見栄えがよくないことに気付きました。右側に 160 ピクセルの空の領域が表示されます。

ランドスケープ モード用に個別の css ファイルを作成する以外に、これを回避する方法はありますか?

4

4 に答える 4

2

方向変更イベントもバインドする必要があります。次のサンプル スクリプトを使用して実行できます。

<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>
于 2012-07-12T16:39:30.620 に答える
1

css レイアウトが絶対値ではなく画面パーセントに基づいている場合、複数の css ファイルがなくても任意の画面レイアウトに調整できるはずです。

パーセント オプションを見てください: http://www.w3schools.com/cssref/pr_dim_width.asp

または、一定にしたいレイアウトがある場合は、それを中央に配置できます。

于 2012-07-12T16:28:39.937 に答える
0

outise ラッパーを中央揃えにします。

body{
    max-width:786;/*target size of page*/
    margin:0 auto auto auto;
}

が最も簡単な方法です。

于 2012-07-12T16:28:51.717 に答える
0

メディア クエリを使用して、向きの変化を検出し、それぞれに対して異なるスタイルをすべて同じスタイルシートで実行できます。

また、モバイルでは、幅に px ではなく % を使用することをお勧めします。モバイル Web アプリの CSS にはどの単位を使用しますか?

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}
于 2012-07-12T16:30:22.383 に答える