iPhone上引导响应式设计中的页面宽度

Posted 2023-03-06

【中文标题】iPhone上引导响应式设计中的页面宽度

【英文标题】：page width in bootstrap responsive design on iphone

【发布时间】：2012-10-27 23:16:56

【问题描述】：

我的引导响应式设计在各种浏览器上运行良好，但页面宽度在 iPhone 上受到限制。我已经添加了视口元标记：

而且它似乎没有帮助。该网站在这里：http://themenuengine.com。任何建议将不胜感激！

【参考方案1】：

bootstrap-responsive.css的第780行左右：

@media (max-width: 767px) 
  body 
    padding-right: 20px;
    padding-left: 20px;
  

用0 覆盖该填充，它将是全角的。

例如：

@media (max-width: 767px) 
  body 
    padding-right: 0 !important;
    padding-left: 0 !important;
  

【讨论】：

谢谢，这对 Sara 有帮助。我遇到的主要问题是面板的宽度（我称之为页面）。它们设置为 100% 宽度，但受到限制。我认为这是一些故意的响应行为，但我无法弄清楚。看起来这只有在您垂直查看网站时才会真正明显。

您指的是.panel div 两侧的灰色吗？如果是这样，那是由于padding: 10px !important 在style.css 的第 164 行。尝试使用 Chrome Web Inspector 或 Firebug 在这种情况下找到罪魁祸首（右键单击额外空间 -> 检查元素 -> 查看应用的样式）。您可以选择性地启用/禁用样式并实时查看结果。

我指的是专门在 iphone 上。垂直时，页面宽度限制为 480 像素（或类似的东西）。到目前为止，我试图弄清楚如何在没有太多运气的情况下覆盖它。

Bootstrap 没有内置任何东西来检测 iPhone 与其他硬件；它完全基于屏幕尺寸和媒体查询。您可以通过将浏览器窗口的大小调整为 iPhone 的屏幕宽度来获得相同的结果。

尽量不要使用!important。只要有@media (max-width: 767px) body padding-right: 0;左填充：0； 稍后在位于 bootstrap-responsive.css 加载到 DOM 之后的样式表中，你是黄金。通过在响应式样式表中添加 !important 将在以后制造一场噩梦，比我们没有 !important 的样式表时更糟糕