iPhone vs Android 网站大小答案

【问题标题】：iPhone vs Android web site sizesiPhone vs Android 网站大小
【发布时间】：2012-08-21 04:48:16
【问题描述】：

我正在尝试调整 my web site 以适用于 android 和 iphone。我已经设置了几乎所有东西来缩小宽度。

当我通过调整自己的网络浏览器窗口大小来测试它时，它按预期工作。当我在我的 iphone 上查看它时，它工作正常。但是当我在 android（或 android 模拟器）上查看它时，它看起来与其他的不同。我附上两个屏幕截图。

我不知道从哪里开始...在此先感谢。

【问题讨论】：

【解决方案1】：

尝试重置正文中的字体。正文 { 字体大小：100%;另外，尝试使用视口见http://developer.android.com/guide/webapps/targeting.html

【讨论】：

【解决方案2】：

Android 模拟器看起来不同的原因很简单：这是因为您将模拟器的屏幕设置为多宽。在您的 CSS 文件中，您已将页面的 min-width 设置为 600 像素，这大于 Android 模拟器的宽度。这会导致标题被截断。

我不是网页设计师，所以如何选择处理如此小宽度的设计取决于您。但是，您可以在 CSS 中使用以下内容来定位此类边缘情况：

@media all and (max-width: 600px) {
    // Some CSS code
}

或者，使用单独的样式表：

<link rel="stylesheet" media="all and (max-width: 600px)" href="android-stylesheet.css" />

【讨论】：