Question

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

我正在使用此标记来尝试实现，但仍然没有太多工作：

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

任何想法如何解决？

Answer 1

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

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

只要浏览器窗口/屏幕宽度大于520px且小于700px，

就会将正文背景设置为红色。

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

Answer 2

您的问题似乎是幻灯片显示和viewport标记：

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

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

width=device-width将页面宽度设置为设备的宽度，iPhone的Mobile Safari上的宽度为320px。如果将此更改为width=950，将视口宽度设置为等于站点宽度，则为950px。这将允许用户完全缩小并查看网站的整个宽度。 Safari会在页面底部添加空格。

网站不适合Ipad和iPhone

2 个答案: