2014-10-31 48 views
1

我在創建移動網站時遇到困難。Android Chrome瀏覽器大字體錯誤/縮放錯誤/元視口設備寬度不起作用

一切工作在所有我測試過的設備的預期,並且全部來自一個我測試過不同的移動瀏覽器,一旁的:在Android瀏覽器(v38.x)(的Nexus 7)

本質上,發生的一切是似乎被炸燬/放大,這使得網站佈局看起來很荒謬。

我使用元視口標記和基於時間的媒體查詢來顯示取決於設備的不同佈局。

這裏發生的事情的一個很簡單的例子:

<head> 
    <title></title> 
    <meta name="viewport" content="width=device-width;initial-scale=1.0;" /> 
</head> 
<body> 
    <div id="top">Font size: 1em</div> 
</body> 

的jsfiddle:http://jsfiddle.net/t6fdb3ak/3/

及以下的如何顯示在Android Chrome瀏覽器的屏幕截圖。

Android Chrome font size bug

這似乎完全古怪的,爲什麼會出現這種情況?另外,如果我警告此頁面上窗口的innerWidth,我得到121px而不是980px。

<script> 
    alert(window.innerWidth); 
</script> 

回答

0

我解決了這個問題閱讀一些本網頁https://developer.chrome.com/multidevice/webview/pixelperfect

我刪除了分號從視meta標籤後,並用逗號替換他們,就像這樣:

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

這是怎麼了它看起來之前:

<meta name="viewport" content="width=device-width;initial-scale=1.0;" /> 

希望一切都會仍然在其他瀏覽器中工作。如果不是,我會報告回來!

-3

嘗試導入引導,他們在視口中的身材,如果你使用,它將肯定工作。

相關問題