响应式设计 - Android无法缩放

我正在处理的响应式设计出现了另一个问题。为了简单起见，如果屏幕尺寸或设备尺寸小于750像素，我会将主体设为捕捉到480px。那么，理想情况下，任何设备上的屏幕都应该缩放以适应宽度。响应式设计 - Android无法缩放

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

iPhone看起来不错;它放大到宽度，所以即使网页大约是480px，它完全适合我的320px iPhone屏幕。

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

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

我的meta标签是这样的：

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

来源

2012-12-21 Kevin

您应该采取移动第一种方法。将网站样式设置为320px宽，然后将设计更改为750px。这将确保您的网站在小于750像素的任何屏幕上都能正常工作。 – donutdan4114

我们正在转换和现有的遗留网站。不幸的是，从移动页面开始只是不切实际。此外，该网站的宽度超过320像素（有160个和300个像素广告区域相邻）。 – Kevin

如果你打算到一个320像素的屏幕，你明明已经上显示一个480x70布局以便缩放，所以这个效果与指定的完全一样，但是iPhone“巧妙地”忽略了一些规则来全屏显示它。您可以将initial-scale的值设置为0.75，以强制每个设备在开始时保持该缩放级别。当然，更好的解决方案是在320px设备上再有一个媒体查询来缩小屏幕内容。

来源

2012-12-21 03:17:36 devsnd

该页面的主体有2个横幅广告必须保留。一个是160宽，一个是300宽。在一起，这些是我必须有460像素的宽度....添加在一个小填充等等，这就是我正在处理的480像素。所以，我需要480px在iphone上扩展到320，并且需要在各种各样的Android设备上使用它。 – Kevin

响应式设计 - Android无法缩放

回答

相关问题