如何讓Android瀏覽器以屏幕尺寸呈現文檔？

我正在研究一個網站，該網站應該可以流暢地縮放到低分辨率，以便在手機上也能正常工作。這在Firefox和Chrome中運行良好，當我將窗口變小時，但是當我在實際的Android手機（運行Android 2.2的Nexus One）上試用它時，它呈現超級巨大！（使用JS的window.innerWidth和window.innerHeight屬性，它似乎它報告的視口分辨率是800x1271！）如何讓Android瀏覽器以屏幕尺寸呈現文檔？

有沒有一種方法在瀏覽器窗口中以實際大小呈現頁面，以便我可以讓我的完整設計在電話中顯示？用戶代理嗅探是允許的，JS允許但不鼓勵。

來源

2010-08-08 MiffTheFox

解決我自己的。解決方案是將以下代碼添加到標題中：

<meta name="viewport" content="width = device-width">

來源

2010-08-08 01:53:18 MiffTheFox

感謝您回答您自己的問題 - 您也讓我了解我的解決方案。

對於有類似問題的其他人來說，我只是在運行Android 2.2的Nexus One上使用jQuery $(window).width()/$(window).height()得到以下結果。

沒有<meta name="viewport">

- 肖像爲800 x 1130，景觀爲800 x 358

隨着<meta name="viewport" content="width=device-width">

- 人像320×452，景觀533 X 239

隨着<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

- 縱向480 x 678，橫向800 x 358 - 真正的像素尺寸！

我還沒有能夠在iPhone上測試它：如果有人想嘗試，測試是here。

來源

2010-11-02 12:35:18 ChrisV

嗯，仍然不是我正在尋找的 - 報告的窗口尺寸現在會隨着縮放而變化。可能有效，但不是我期待的... – ChrisV 2010-11-02 12:46:42

如何讓Android瀏覽器以屏幕尺寸呈現文檔？

回答

相關問題