jquery - 网站不适合 Ipad 和 iPhone

Question

This is the website:

问题是屏幕不适应视口(viewport)(第一次加载时两侧没有白边)，如果你缩小并看到整个页面，也会在右边出现奇怪的大白边。

我正在使用这个标签来尝试实现，但仍然效果不佳:

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

只要您的浏览器窗口/屏幕宽度大于 520 像素且小于 700 像素，就会将正文背景设置为红色。

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