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>

现在，如果说设备宽度为 480 像素，那么“page1”的宽度为 480 像素——我希望它的宽度为 460 像素（即不包括 20 像素的填充），如果设备宽度为 n，那么我想要页面 div 的宽度为“n - 20”

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

我试图通过这样做来覆盖它

\#page1
{
   width:auto;
}

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

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

通常，具有 width = auto 的 div （这是一个块元素）会导致 div 占用等于其父宽度的空间，不包括其填充/边距/边框 - 但 wrt “页面”（内部是一个 DIV 元素）不会似乎是这样-

关于如何使它工作的任何想法？

谢谢，

4

1 回答 1

0

一种建议是使用 Modernizr 来检测最大设备宽度或最大宽度：

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 回答