0

我正在处理的响应式设计提出了另一个问题。为简单起见，如果屏幕尺寸或设备尺寸小于 750 像素，我将主体设置为 480 像素。然后，理想情况下，任何设备上的屏幕都应该缩放以适应宽度。

今天已经在这里得到了一些帮助，我添加了视口元，所以现在 CSS 可以响应我的 iPhone 和 Android，以及最小化时的桌面浏览器。

iPhone 看起来很棒；它缩放到宽度，所以即使网页大约是 480 像素，它也非常适合我的 320 像素 iPhone 屏幕。

但是，在 Android 上，它放大得太远了。大约 25%-30% 的右侧不在屏幕上，我必须滚动才能看到它。如果我稍微缩小一点，则窗口在宽度方面适合屏幕并且看起来不错。我不知道为什么我必须手动缩小。

  • 为什么加载页面时Android没有缩小到页面的宽度？

我的元标记如下所示：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

我的 CSS 看起来像这样：

@media all and (max-device-width: 750px), all and (max-width: 750px) {
  body {max-width:480px;}
  #container {
    width: 90%;
    margin: 0px auto;
    padding: 0px;
    min-width:480px;
  }
  #rightnav {display:none;}
}
4

1 回答 1

0

如果您打算在 320 像素的屏幕上显示 480 像素的布局，您显然必须缩放，所以这完全按照指定的方式工作，但 iphone“聪明地”忽略了一些规则以全屏显示。您可以将该initial-scale值设置为 0.75 以强制每个设备在开始时保持该缩放级别。当然，更好的解决方案是在 320 像素设备上使用另一个媒体查询来进一步缩小屏幕内容。

于 2012-12-21T03:17:36.567 回答