0

モニターに基づいた寸法のウェブサイトを開発しました。Ipad で見たとき、右隅に css の色がありません。見てみる

ここに画像の説明を入力 ここにHTMLコードがあります。

 <div id="nav-top">
        <div class="wrapper">
            <!-- Top Navigation Menu -->
            <ul class="menu-nav-top">
                <li>About</li>
                <li>Contact</li>
            </ul>
            <!-- Top Social Links -->
            <ul class="social-links">
                <li>contact</li>
                <li>Twitter</li>
                <li>Facebook</li>
            </ul>
        </div><!--#wrapper-->
    </div><!--#nav-top-->

    #nav-top {
        background: url("img/bg_body_blue6.png") repeat-x scroll 0 0 transparent;
        height: 36px;
        position: relative;
        z-index: 4;
    }

    .wrapper {
        margin: 0 auto;
        position: relative;
        width: 1146px;
    }

ソース コードを確認したところ、ラッパーの幅が ipad のセーフ ゾーン (920px) よりも大きいため、ipad は css を表示可能な領域にのみ適用し、残りは dosn を表示するためにスクロールする必要があることがわかりました。スタイルがない。

これを修正する方法はありますか (非表示領域または表示するためにスクロールする必要がある領域で css を取得します)

ありがとう

4

3 に答える 3

1

問題がサイトのサイズが間違っていた場合、右側にレンダリングされているものをまったく見ることができません。

ULとは何をしているのですか？一方のフロートは左で、もう一方のフロートは右ですか? その場合は、「nav-top」ではなく「wrapper」で幅を設定している可能性が高いです。

のようなものに変更すると

#nav-top {
  background: ...;
  height: 36px;
  width: 100%;
  max-width: 1146px;
}


.wrapper {
  display: block;
  width: 100%;
  max-width: 1146px;
}

それはうまくいくはずです。また、UL のフロートをクリアすると、この問題も解決するはずです。これを既存のコードに追加する

 .wrapper:after {
   content: ' ';
   display: inline-block;
   height: 0px;
   visibility: hidden;
   clear: both;
 }

あなたも大丈夫なはずです。

私はAndyに同意しますが、モバイルに移行するときにうまく変換できないため、固定幅を使用しないでください（デザインに依存しない限り）。

それが役立つことを願っています。

于 2012-10-27T01:16:07.897 に答える
0

iPadでもうまく表示したい場合は、絶対値ではなくパーセンテージに基づいてこれを作成することをお勧めします.

パーティクルの状況ではmax-width:100%;、ラッパーに a を追加して、幅を 1146 ピクセルにするか、画面/ブラウザーがそれよりも小さい場合は、代わりに幅全体にすることができます。

.wrapper CSS を次のように変更します。

.wrapper {
    margin: 0 auto;
    position: relative;
    width: 1146px;
    max-width: 100%;
}

別の解決策は、絶対ピクセルの代わりに幅のパーセンテージのみを指定することです。しかし、上記はあなたが達成しようとしているものには問題ないはずです...（div内の他のものが完全な1146pxを必要としないことを確認してください.egimg {max-width:100%}も役立つかもしれません）

しかし、それは現在の手元の問題を解決するだけの可能性があります。理想的には、Web サイトをすべてのブラウザー サイズ、デバイス、および形状に合わせて、レスポンシブに構築したい場合です。レスポンシブ サイトを開発するための優れたフレームワークは、http://foundation.zurb.com/です。

于 2012-10-27T01:03:16.660 に答える
0

Viewport Meta Tagを調べる必要があるようです。画面サイズに比例して、表示している Web サイトのスケールを設定するために使用されます。

次のように、html ファイルの に含めることができます。

<head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
于 2012-10-27T01:04:59.220 に答える