智能手机的额外空间

Posted 2023-03-06

【中文标题】智能手机的额外空间

【英文标题】：Extra space at Smartphones

【发布时间】：2014-06-12 22:28:56

【问题描述】：

我网站的主题是 Drupal 响应式主题（Pixture 重新加载），宽度设置为 960 像素，最大宽度为 1140 像素，宽度为 90%。

在 PC 上，该网站在所有浏览器下看起来都很好。在 SP 处，左侧有额外的空间。我不知道如何检查原因并修复它。请帮助我了解出了什么问题。谢谢。

【参考方案1】：

问题依旧……

我的其他网站 www.Grar-Natan.co.il 使用完全相同的模板（和完全相同的 CSS）并且没有这个问题。站点之间的唯一区别是第二个站点有侧边栏...缺少侧边栏似乎会导致问题...我可以轻松引入一个，但我宁愿不在站点中放置侧边栏。

【参考方案2】：

您必须在模板随附的 css 文件中编辑 media-queries。要为带有max-width:960px; 的屏幕添加额外的 20 像素填充，我建议在您的代码中添加以下内容：

@media only screen and (max-width: 960px) 
   body 
     padding-left:20px;
     padding-right:20px;
   

您当然可以通过更改第一行来修改该样式表，例如要为宽度在 500 到 960 像素之间的屏幕制作 40 像素的填充，您可以编写：

@media only screen and (min-width:500px) and (max-width: 960px)

如果您不想使用媒体查询，您可以通过添加以下内容直接将填充应用到正文：

body 
    padding-left:20px;
    padding-right:20px;

这将为每个屏幕添加填充（甚至比 960 像素更宽），但最终结果将是相同的。

所以，选择你觉得更舒服的选项。第一个给你更多的灵活性，但它更复杂。第二个更简单，更容易实现。