6

I had finished this website a while ago but something happened to it and I've now spent all day fixing it and getting it back from scratch as my backup wasn't correctly done. I don't quite understand what it's doing as I've done this technique on many other websites with no troubles, maybe I've looked at this website too long?

Here is the website. I'm wanting to put some space on the left and right hand side, however I dont just have one container as I was needing the dark grey bar at 100% of the screen and always under the banner no matter where it was. So there are 4 "containing" divs that I want to have the space. I've placed soem CSS3 media queries in but now I'm getting a gap to the right. I was thinking it was because my background mages are going all the way across but they set at 100% so I'm just not understanding whats going on. It's somethign simple, I'm not seeing it right now..

This is what I have for the media queries 

/* 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; }

}

This is what t looks like on my iPhone

enter image description here

Any advice is helpful and appreciated.

4

3 回答 3

3

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

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

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

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

用于非响应式设计的视口元标记

于 2012-12-13T00:57:22.617 回答
0

这个怎么样：

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

于 2012-12-13T23:01:55.037 回答
0

我检查了实时站点，看起来问题只是右侧只有 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; }
}
于 2012-12-13T02:07:17.040 回答