Question

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

在今天的帮助之后，我添加了视口元，所以现在CSS响应我的iPhone和Android，以及最小化时的桌面浏览器。

iPhone看起来很棒;它缩放到宽度，所以即使网页大约480px，它也完全适合我的320px 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;}
}

Answer 1

如果您计划在320px屏幕上显示480px布局，您显然必须进行缩放，因此这完全符合规定，但iphone“聪明地”忽略了一些规则以全屏显示。您可以将initial-scale值设置为0.75以强制每个设备在开始时保持该缩放级别。当然，更好的解决方案是让另一个媒体查询在320px设备上进一步缩小屏幕内容。

响应式设计 - Android不缩放

1 个答案: