在移动设备中为网站设置填充答案

【问题标题】：Setting up padding for websites in mobile devices在移动设备中为网站设置填充
【发布时间】：2012-10-25 00:04:30
【问题描述】：

我不久前完成了这个网站，但它发生了一些事情，我现在花了一整天的时间修复它并从头开始恢复它，因为我的备份没有正确完成。我不太明白它在做什么，因为我在许多其他网站上都没有遇到过这种技术，也许我已经看这个网站太久了？

Here is the website。我想在左侧和右侧放置一些空间，但是我不只有一个容器，因为我需要 100% 的屏幕上的深灰色条，并且无论它在哪里，总是在横幅下。所以我想要有 4 个“包含”的 div 空间。我已经在其中放置了一些 CSS3 媒体查询，但现在我在右边有一个空白。我在想这是因为我的背景法师一直在走，但他们设定为 100%，所以我只是不明白发生了什么。这很简单，我现在没有看到它..

这就是我的媒体查询

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

#header, #banner, #main, #footer-widget-area { padding: 0 2em 0 2em; }

}

这就是我 iPhone 上的样子

任何建议都是有帮助和赞赏的。

【问题讨论】：

@ambrealsweb 你明白我在说什么了吗......

标签： iphone css mobile padding media-queries

【解决方案1】：

查看viewport 元标记。如果您要将代码添加到页面的<head>：

<meta name="viewport" content="width=1100">

这将强制 iPhone 的视口呈现 1100 像素宽。 iPhone 上的默认视口是 980 像素，因此您的页面暗示 100% 宽度是 980 像素，而不是真实内容的宽度。

视口可能很棘手，这里有一些关于它的更多信息：

Viewport meta tag for non-responsive design

【讨论】：

【解决方案2】：

我检查了实时站点，看起来问题只在于右侧只有 3 像素的额外空间。我还注意到导航菜单中有一个换行符。看起来将智能手机媒体查询更改为以下内容将解决最后一个问题：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

#header, #main, #footer-widget-area { padding: 0 1em 0 1em; }
#banner { padding: 0; }
#header-right { width: auto; }
#access .menu-header { width: auto; }

h4 { font-size: 1.4em; line-height: 1em; }
}

【讨论】：

【解决方案3】：

这个怎么样：

#wrapper { padding:0 2em; margin:0 auto; overflow:hidden; height:auto; }
#header, #content, #stuff, #etc { margin:0;padding:0; }
#inside stuff { whatever else; }

将#wrapper 包裹在最外面的DIV 周围（紧跟在<body> 之后并在</body> 之前关闭）。

除非您的计划是将一些元素放置在 2em 填充区域之外，否则我无法想象为什么这不是解决您的问题的更有效解决方案。

【讨论】：