jquery mobile：设置填充到主页div元素，使填充+宽度=设备宽度

我想设置一个填充到主页面DIV元素的文档，以便填充+宽度（页面div元素） =设备宽度jquery mobile：设置填充到主页div元素，使填充+宽度=设备宽度

我想设置一个填充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像素的“第1页”，走的是480像素宽 - 我想它采取的宽度460px（即排除20px的填充）一般来说，如果设备宽度为n，那么我希望页面div的宽度为“n - 20”

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

我尝试下面做这个

\#page1 
{ 
    width:auto; 
}

覆盖，但这样做会导致页面占用不正确的宽度 - 根据孩子宽度的宽度;

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

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

任何想法如何让这个工作？

感谢，

来源

2012-12-12 naiveCoder

一个建议是使用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-12 19:00:37 devnull

jquery mobile：设置填充到主页div元素，使填充+宽度=设备宽度

回答

相关问题