Question

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

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上的样子

enter image description here

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

Answer 1

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

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

这将迫使iPhone的视口渲染1100px宽。 iPhone上的默认视口是980px，因此您的页面暗示100％宽度为980px而不是真实内容的宽度。

视口可能很棘手，这里有更多信息：

Viewport meta tag for non-responsive design

Answer 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; }
}

Answer 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填充区域之外，否则我无法想象为什么这不是解决问题的更有效方法。

为移动设备中的网站设置填充

3 个答案: