jquery mobile :将padding设置为main page Div元素，以便padding + width = device-width
我希望对文档的主页面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，那么我希望页面div的宽度是"n - 20”。
"page1“采用相同宽度的原因是jquery-mobile css将宽度指定为100% (在ui-page css类中)
我尝试通过执行以下操作来覆盖它
\#page1
{
width:auto;
}但这样做会导致页面占用不正确的宽度--基于子项宽度的宽度；
我不能在css中指定宽度百分比，因为我没有设备宽度之前，我没有填充百分比-否则，如果填充是5%，那么我可以指定宽度为90%，因为它是10px硬编码，我不能指定页面元素的百分比。
通常，带有width = auto的div (这是一个块元素)会导致div占用与其父宽度相等的空间(不包括填充/边距/边框)-但是wrt "page“(在内部是一个DIV元素)似乎不是大小写-
你有什么办法让它工作起来吗？
谢谢,
回答 1
Stack Overflow用户
发布于 2012-12-13 03:00:37
一种建议是使用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可能更适合您的目的。
https://stackoverflow.com/questions/13844530
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号