Html jquerymobile：将padding设置为主页Div元素，以便padding+；宽度=设备宽度_Html_Css_Jquery Mobile

Html jquerymobile：将padding设置为主页Div元素，以便padding+；宽度=设备宽度

html css jquery-mobile

Html jquerymobile：将padding设置为主页Div元素，以便padding+；宽度=设备宽度,html,css,jquery-mobile,Html,Css,Jquery Mobile,我想为文档的主页DIV元素设置一个填充，以便 padding+width（页面Div元素的）=设备宽度我想将padding设置为10px，并希望page元素占据设备宽度的其余部分问题是，即使设置了填充，页面元素的宽度（100%）也与设备宽度相同我已经准备好了以下东西- <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name

我想为文档的主页DIV元素设置一个填充，以便 padding+width（页面Div元素的）=设备宽度

我想将padding设置为10px，并希望page元素占据设备宽度的其余部分

问题是，即使设置了填充，页面元素的宽度（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>

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

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

通常，width=auto的div（这是一个块元素）会导致div占用与其父级宽度相等的空间，不包括其填充/边距/边框，但wrt“page”（这是一个内部div元素）似乎不是case-

有什么办法让它工作吗

谢谢，

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

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

此解决方案的主要问题是它不是任意的，因此您需要为您想要支持的每个设备编写一个案例。测试

window.screen.width

可能更适合您的目的

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