Question

我想设置一个填充到文档的主页面DIV元素，以便 padding + width（页面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，那么我希望页面div的宽度为“n - 20”

“page1”占用相同宽度的原因是因为jquery-mobile css将宽度指定为100％（在ui-page css类中）

我尝试通过执行此操作来覆盖它

\#page1
{
   width:auto;
}

但这样做会导致页面占用不正确的宽度 - 基于子宽度的宽度;

我无法在css中指定宽度百分比，因为我没有设备宽度优先并且我没有填充百分比 - 否则如果填充是5％那么我可以指定宽度为90％，因为它是10px硬编码，我不能指定页面元素的百分比。

通常，宽度= auto的div（块元素）会导致div占用的空间等于其父宽度，不包括其填充/边距/边框 - 但是wrt“page”（内部是DIV元素））似乎并非如此 -

有关如何使这项工作的任何想法？

谢谢，

Answer 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可能更适合您的目的。

jquery mobile：将填充设置为主页Div元素，使填充+宽度=设备宽度

1 个答案: