网站不适用于Ipad和iPhone

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是最初加载时大小为rending的内容。 它以1：1的像素比率加载，而不是按比例缩小以查看整个页面。

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