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