网站不适合Ipad和iPhone

Question

这是网站:

问题是,在屏幕doesn't适应视口(无白边对边时,第一负载),也使得一个奇怪的大白边的权利,如果你缩小,看到整个页面.

我使用这个标签试图实现,但仍然没有太多工作:

<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媒体查询'和'响应式设计',这将指向你正确的方向