【问题标题】:page width in bootstrap responsive design on iphoneiPhone上引导响应式设计中的页面宽度
【发布时间】:2012-10-27 23:16:56
【问题描述】:

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

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

【问题讨论】:

    标签: iphone css twitter-bootstrap responsive-design


    【解决方案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 !importantstyle.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 的样式表时更糟糕
    猜你喜欢
    • 1970-01-01
    • 2016-04-30
    • 1970-01-01
    • 2013-01-27
    • 2023-03-31
    • 1970-01-01
    • 1970-01-01
    • 2012-03-12
    • 2012-05-19
    相关资源
    最近更新 更多