1

私はレスポンシブ Web サイトを設計しており、この問題に遭遇しました。

まず、ポートレート モードからランドスケープ モードに変更しても反応がありませんでした。ウェブサイトにズームインしただけです。これが起こらないことを確認しました：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

ただし、ユーザーがポートレート モードに戻すと、右側に空白が表示されます。これがスクリーンショットです。

ここに画像の説明を入力

以下はコンテナのコー​​ドの一部です。

    <div class="about">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <div class="headlines"><h1>Hello..</h1></div>
                    <div class="row">
                        <div class="span6">
                            <p>
                                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                            </p>

                            <p>
                                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                            </p>
                        </div>
                        <div class="span6">

                            <p>
                                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                            </p>

                        </div>
                    </div>
                     <hr class="soften"/>

                            <div class="about-hire">
                                <h3 >Hello?</h3><a href="#" class="btn-about">Let's talk!</a>
                            </div>
                </div>
            </div>
        </div>
    </div>

これが対応する CSS です。

.about {
     text-align: center;
     padding: 100px 0 100px 0;
     background-color: #fff;

}

.about .container {

    position: relative;
    z-index: 9;
}


 @media (max-width: 767px) {


  .about {
    margin-left: -20px;
    margin-right: -20px;

  }

   .about .container {
    margin-left: 20px;
    margin-right: 20px;

  }



 }

どんな助けでも大歓迎です。

4

1 に答える 1

0

ここで2つのことを考えることができます：

1. スケールは次のようになります。

<meta name="viewport" content="width=device-width, initial-scale=1">

2. 寸法の状態である可能性があります...ない場合は、ボディタグにこれを追加します...マスターcssで：

body {min-width: 100%;}

具体的にしたい場合は、これから始めることができます： body {min-width: 1024px;}

次に、必要に応じて適切にメディア コードを追加します。例：

@media only screen and ( max-width: 640px) {blah}

:)

于 2013-01-08T15:46:42.653 に答える