響應式網站 - 只有Android立即開始連續放大加載

我還沒有發現任何類似的問題來搜索這個問題。響應式網站 - 只有Android立即開始連續放大加載

網站：http://davidbrownhydraulics.com（舊的設計，而不是我）

工作正常：iPhone 4/5/iPad上的/ etc

不工作在：Android手機...銀河S2和其他星系的。（需要實際上加載它在Android手機上，看看它是如何工作的）

當我測試這個網站時，我得到的應該是應該在那裏顯示，但它很快就會不斷擴大。就好像瀏覽器正在決定永遠放大一樣。我試圖指出它可能導致這個問題的地方，它應該是最大設備寬度，或者我可以只是一目瞭然地瞄準Android手機？

任何人有任何想法，我可以嘗試？我嘗試了很多不同的META內容類型的東西，改變斷點（我有一種感覺，它可能是關閉的銀河S2？或Android有一個不同的像素尺度）無濟於事。

這裏是編碼的相關章節：

頭部元：

<meta http-equiv="Content-Type" name="viewport" content="charset=UTF-8, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

媒體查詢：

@media screen and (max-device-width:767px)

我的CSS它：（想法，它只是捕捉到最大設備寬度）

html { width:100%; overflow-x:hidden; } 
body { width:100%; overflow-x:hidden; } 
#outer { width:100%; } 
#main { width:100%; } 
#header { width:100%; max-width:100%; overflow:hidden; }

預先感謝，如果有人給它一個加載他們的Android手機，讓我知道他們的想法

來源

2013-02-27 Ivandude

設置一個視口告訴瀏覽器內容應該適合設備的屏幕上，並通知瀏覽器網站針對移動設備（Android，Windows，iOS）進行了優化。請使用瀏覽器將視口設置爲初始比例爲1的設備寬度。

試試這個。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

這對所有視口都能很好地工作。

來源

2013-02-27 19:36:37

幾個緊張小時後試圖弄清楚爲什麼，我意識到這是此爲Android把它撿起來的CSS是需要：「媒體屏幕」不會拿起觀點。我把它改成了「media ** all **」，它工作。 – Ivandude 2013-02-27 23:29:58

幾個緊張小時後試圖弄清楚爲什麼，我意識到這是這是需要爲Android把它撿起來的CSS：

@media screen

不會拿起觀點。我把它改爲

@media all

而且工作正常:) gah！簡單的事情...

來源

2013-02-27 23:31:39 Ivandude

好吧，再看看這一切，我已經調整了我的CSS媒體查詢（請參閱源代碼，如果需要的話），但這個主要的編碼位有所幫助。看起來像試圖在所有東西上設置100％的寬度，導致Android變得更加糟糕。

把這個放在我的css中斷點（並根據你自己的需要修改它，如果這有助於某人）幫助並保持網站可瀏覽。一個很好的快速修復。

html { width:100%; overflow-x:hidden; max-width:480px !important; } 
body { width:100%; overflow-x:hidden; max-width:480px!important; } 
img { max-width:480px !important;}

來源

2013-02-28 01:11:23 Ivandude

響應式網站 - 只有Android立即開始連續放大加載

回答

相關問題