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