爲什麼meta「viewport」標籤會讓我的頁面在Android設備上放大？

我想讓我的網站在移動設備上更「響應」。爲什麼meta「viewport」標籤會讓我的頁面在Android設備上放大？

我已經嘗試了很多的「視口」 meta標籤，這是目前的變化：

<meta name="viewport" content="width=device-width, initial-scale=1" />

但對於我的HTC生動某種原因，頁面加載相當放大在：

HTC Vivid Screeny

任何想法，所以在網頁上我的Android 100％，可見我如何調整視？

來源

2013-03-19 Kane

也許嘗試這樣的事：

<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1"/>

我還在努力瞭解viewport是誠實的。但我想，我現在可能已經明白了。應將視口width設置爲內容的默認可見寬度。例如：如果您只有<img/>和width: 320px，則如果您使用上述代碼，則圖像將爲全屏。

來源

2013-03-19 19:52:55

不，長得一模一樣。我甚至使用Chrome開發工具從我的PC進行調試，所以我可以確保它不是緩存問題。 – Kane 2013-03-19 19:57:03

@凱恩，我做了一個更新，也許這有幫助。但據我所知，你的佈局現在不是很響應，也許你稍後再改變它。但目前你的最小寬度大約是1000px。這應該是你的視口寬度。 – 2013-03-19 20:44:21

不是，仍然不是解決方案，如果我將它設置爲1000px我不能使用@media CSS查詢來隱藏邊欄，設置下拉菜單等。我認爲你是對的，HTML/CSS佈局需要一些工作才能真正做出反應。 – Kane 2013-03-20 00:02:27

initial-scale=1

導致它的負載放大，你可以刪除它，或者用最大規模的或最小規模（無論什麼你想實現）替換它。

來源

2013-03-19 19:58:59 Ian

我改變它只說「寬度=設備寬度」，但它仍然加載完全相同。 – Kane 2013-03-19 20:01:47

此代碼爲我工作偉大的...我希望它會爲你工作太...

// fit the width of screen 
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size 
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

來源

2013-03-20 10:56:54 aftab

爲什麼meta「viewport」標籤會讓我的頁面在Android設備上放大？

回答

相關問題