1

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

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

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

安卓模拟器

苹果手机

4

2 回答 2

1

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" />
于 2012-08-26T13:04:07.073 回答
1

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

于 2012-08-26T13:03:10.337 回答