0

質問の答えを見つけるのに疲れました。携帯などからも同じように見られるサイトにしたい。レスポンシブという意味ではなく、モバイルの訪問者は、マウスを水平にスクロールしても同じレイアウトの Web サイトを見ることができます。これは、すべての Web サイトで可能です。そのためのコードは必要ありません。同じレイアウトは通常、マウスを水平にスクロールするモバイルで表示されます。しかし、私は 1 つのシナリオで問題を抱えています。例を作成しました。はい、これ..

モバイルまたは小さなノートブックなどの同様のデバイス (または小さなブラウザーにサイズ変更) からその Web サイトを表示すると、次のように表示されます。

div は 100% 幅で定義されていますが、青い div はブラウザーの 100% 幅を埋めることができないことがわかります! その画像の一部の下にある灰色の div を見てください。通常の段階では、blue(div.top) と gray(div#gcontent) の両方の div がブラウザの中央にありますが、小さな画面では、灰色の div が 100% の幅を埋め、青い div が 100% の幅を埋められませんでした。どういう理由ですか。どうすれば修正できますか？

それの構造:

<body>
    <!-- top start -->
    <div class="outer top">
        <div class="inner">
            <div class="nav">
                <p>Lorem Ipsum is simply dummy text .... of Lorem Ipsum.</p>
            </div>
        </div>
    </div>
    <!-- top end -->
    <!-- wrapper start -->
    <div class="wrapper">
        <!-- header start -->
        <div id="header">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" width="124" height="104" alt="logo" /></a>
            </div>
            <h1>WELCOME</h1>
        </div>
        <!-- header end -->
        <!-- content start -->
        <div id="content">
            <P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
            <P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
            <P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
        </div>
        <!-- content end -->
    </div>
    <!-- wrapper end -->
</body>

CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

a {
    text-decoration: none;
    color: #fff;    
}
.clear { clear: both; }
body {
    background: url(../images/bg.png) repeat-x #fff;
    color: #000;
    font-family: Helvetica, Myriad Pro, Verdana;
    font-size: 14px;
    line-height: 1em;
}

.outer {
    width: 100%;
    float: left;
    display: block;
}
.top {
    background: #009999;    
}

.inner {
    width: 940px;
    margin: 0 auto;

}
.wrapper {
    width: 940px;
    margin: 0 auto;
    text-align: left;

}

#header {
    width: 100%;
    float: left;    
}

h1 { font-weight: normal; }
h2 { font-size: 22px; font-weight: normal; }
h3 { font-size: 15px; font-weight: normal; }
p { font-size: 12px; }
.logo a {
    display: block;
    width: 124px;
    height: 104px;
    margin: 31px 46px 0 10px;
    float: left;
}

#header h1 {
    font-size: 23px;
    text-transform: uppercase;
    font-family: 'HelveticaNeueLTStd-Bd-75';
    color: #004481;
    padding: 110px 0 33px 0;    
}

#content {
    width: 100%;
    float: left;
    background: #b2b0b0;
    margin: 0 0 200px 0;
    -moz-box-shadow: 1px 0 5px 5px #acacac;
    -webkit-box-shadow: 1px 0 5px 5px #acacac;
    box-shadow: 1px 0 5px 5px #acacac;  
}

数日前にここで同様のタイプの質問をしました。しかし、解決策は見つかりませんでした。誰かが、小さな画面でその問題を引き起こす内部 div(幅: 940px) の問題を教えてくれました。しかし、私のポイントは青い div(div.top) が幅 100% の外側の div にあるということです。では、なぜ内部 div がこれを担当しているのでしょうか。小さな画面用に別のスタイルシートを作るように誰かに言われました。でも、私は問題を理解できませんが、解決策は簡単ではありませんか? しかし、小さな画面用に別のスタイルシートを作成することが最終的に唯一の解決策である場合、そのシナリオのコードは何でしょうか? 基本的に、私はこれがたくさん必要な場所で、このような構造のウェブサイトを作成しています:

.outer {
   width: 100%;
   float: left;
}
.inner {
  width: 940px;
  margin: 0 auto;
}

そのウェブサイトがレスポンシブになることは望ましくありません。しかし、少なくとも訪問者はモバイルからそのシナリオ (青または div.top: width: 100% がブラウザーの 100% を埋めることはできません) を見るべきではありません。ですから、小さな画面の青い div でブラウザの幅 100% を簡単な方法で埋める解決策を教えてください。その外側のdivの1つまたは2行のコードを追加すると問題を解決できるように思えますが、そのコードが何であるかはわかりません:(事前に感謝します!

4

3 に答える 3

1

のようなルールを設定したwidth: 100%;場合、この場合、css の実行方法について、100% はサイトの実際の幅ではなく、ブラウザのサイズから得られます。サイトの幅は約になっていますが、モバイルではブラウザのサイズが小さくなっています。940px

次のようなルールを追加してみてください。

html {
   min-width: 940px;
}

おそらく、それで十分です。

min-width幅の長いブラウザ (デスクトップなど) の場合、plain の代わりに を使用するwidthと、サイトは今と同じように表示され、幅の狭いブラウザにのみ調整が適用されます。

于 2013-08-20T04:49:38.810 に答える
0

これを HTML の head に追加するだけです

    <meta name='viewport' content='width=device-width, initial-scale=1 />
于 2013-08-20T05:05:45.373 に答える
0

問題は、青い背景の div も 100% 幅に指定されていることです。100% 幅が 940px 未満の場合、青色の背景はテキストを含む div よりも小さくなります。固定幅 940px がないようにサイトを変更するかtop、テキストを含む同じ div にクラスを適用することができます (innerクラスを使用)。

于 2013-08-19T20:20:25.060 に答える