2

这是网站：

问题是屏幕不适应视口（首次加载时两侧没有白边距），并且如果您缩小并查看整个页面，也会产生一个奇怪的大白边距。

我正在使用这个标签来尝试实现但仍然没有太多工作：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes" />

这是我的CSS：

body {
background-color:#fff;
font-family:'Droid Sans', arial, sans-serif;
color: #777;
width: 100%;
margin:  0;
}
#page {
width: 950px;
margin: 0px auto;
padding:0px;
background-color:#fff;
z-index: 0;
}

任何想法我该如何解决？

4

2 回答 2

6

你需要的是一种叫做 CSS 媒体查询的东西。基本上，您为特定的屏幕尺寸创建不同的 CSS 规则。例如

@media screen and (max-width: 700px) and (min-width: 520px) {
  body {
    background: red;
  }
}

每当您的浏览器窗口/屏幕宽度大于 520 像素且小于 700 像素时，会将主体背景设置为红色。

尝试在谷歌上搜索“CSS 媒体查询”和“响应式设计”，这将为您指明正确的方向

于 2012-12-14T20:29:49.457 回答
1

您的问题似乎是您的幻灯片和viewport标签：

#slideshow设置为width:1083px;哪个会导致您网站右侧的空白。将其更改为100%，这将解决它。即使溢出设置为hidden元素

initial-scale=1.0是最初加载时的大小。它以 1:1 的像素比率加载，并且没有按比例缩小以查看整个页面。

width=device-width正在将页面的宽度设置为设备的宽度，在 iPhone 的 Mobile Safari 上为 320 像素。如果您将其更改为类似width=950的内容，则会将视口的宽度设置为等于您网站的宽度，即 950 像素。这将允许用户一直向外扩展并查看站点的整个宽度。Safari 会在页面底部添加空格。

于 2012-12-14T22:16:09.350 回答