iPhone与Android网站的大小

Question

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

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

我不知道从哪里开始......提前致谢。

Answer 1

尝试重置正文中的字体。 body {font-size：100％;另外，尝试使用视口，请参阅http://developer.android.com/guide/webapps/targeting.html

Answer 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" />