0

ドキュメントのメイン ページの DIV 要素にパディングを設定して、パディング + (ページの Div 要素の) 幅 = Device-Width となるようにしたい

10px のパディングを設定し、ページ要素が残りのデバイス幅を占有するようにします。

問題は、パディングを設定しても、ページ要素がデバイスの幅と同じ幅 ( 100% ) を取っていることです。

私は次のものを用意しています -

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <style>
            #page1
            {
                padding:10px;
            }
        </style>
        <script src="jquery/1.7.2/jquery.min.js"></script>
        <script src="jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="page1">
        </div>
    </body>
</html>

今、たとえば、デバイスの幅が 480px の場合、「page1」の幅は 480px です。一般に、幅を 460px にしたい (つまり、20px のパディングを除く)。デバイスの幅が n の場合、 "n - 20" の幅を取るページ div

「page1」が同じ幅を取っている理由は、jquery-mobile css が幅を 100% に指定しているためです (ui-page css クラスで)。

私はこれを行うことによってそれをオーバーライドするためにフォローしようとしました

\#page1
{
   width:auto;
}

しかし、それを行うと、ページが誤った幅 (子の幅に基づく幅) を占めるようになります。

前にデバイス幅がなく、パーセンテージでパディングがないため、CSSで幅をパーセンテージで指定できません-そうでない場合、パディングが5％の場合、幅を90％として指定できます。ページ要素のパーセンテージを指定できません。

通常、 width = auto の div (ブロック要素である) により、div はそのパディング/マージン/境界線を除く親の幅と同じスペースを占有しますが、「ページ」(内部的には DIV 要素である) はそうではありませんそうらしい -

これを機能させる方法についてのアイデアはありますか?

ありがとう、

4

1 に答える 1

0

1つの提案は、Modernizrを使用してmax-device-widthまたはmax-widthを検出することです。

if (Modernizr.mq("screen and (max-width: 480px)")) {
  // set width of page class = 480-n
}
.. settings for other common screen widths ..

このソリューションの主な問題は、それが恣意的ではないため、サポートするデバイスごとにケースを作成する必要があることです。テストwindow.screen.widthはあなたの目的にとってより良いかもしれません。

于 2012-12-12T19:00:37.383 に答える