logo标签列表

在移动设备上为网站设置填充。

iphonecssmobilepaddingmedia-queries
6
我之前完成了这个网站，但后来出了些问题。由于备份不正确，我花了一整天的时间修复它并从头开始重建。我不太明白它在做什么，因为我在许多其他网站上都使用过这种技术，而且没有遇到任何问题。也许是因为我看这个网站的时间太长了？
这是网站链接：http://ambergoodwin.com/barnett。我想在左右两侧留出一些空间，但我不只有一个容器，因为我需要在屏幕的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 上的 t 的样子。 enter image description here 欢迎提供任何有用的建议。
@ambrealsweb，你明白我在说什么吗？ - Shailender Arora
3个回答
3

请查看 viewport meta 标签。如果您想将该代码添加到页面的 <head> 中：

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

这将强制 iPhone 的视口渲染 1100 像素宽。iPhone 的默认视口宽度为 980 像素，因此您的页面意味着100％的宽度是 980 像素，而不是真实内容的宽度。

视口可能有些棘手，以下是一些更多信息：

针对非响应式设计的视口元标记

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; }
}
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填充区域之外，否则我无法想象为什么这不是解决您问题的更有效的方法。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接