Android平板電腦看似忽略元視口

我有一個網站，我試圖讓所有設備都完美地坐下來。Android平板電腦看似忽略元視口

我正在使用媒體查詢來指定基於設備的不同佈局。然而，我對視口有問題。

我視標籤：

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

它坐落完美地在iPad上，但是，Android平板電腦，它似乎忽略中繼檢視區標記。

（原諒蹩腳的照片iPhone相機使用同事的平板電腦，並沒有想進入他的電子郵件給自己發送屏幕抓取！）

這裏是如何加載 - 注意一下它不顯示縮放級別正確。它被放大得太遠，有些頁面在屏幕右側： enter image description here

當我捏縮小（儘可能它會允許）它看起來像這樣 - 這就是我想要它出現在第一負載的用戶縮小之前：

enter image description here

當我旋轉設備，它不改變顯示寬度在所有所以會出現在相同的縮放級別，但在任一側的白色空間。

有沒有人有任何想法，我怎麼得到它的行爲，所以我可以去週末和飲酒？

來源

2013-03-08 Fraser

您是否已嘗試將'target-densitydpi = device-dpi'添加到列表中？我懷疑你的平板電腦瞭解'@ viewport' CSS規則，但值得一試：http：//dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ – cimmanon 2013-03-08 17:53:21

也檢查這出：http://stackoverflow.com/q/10466810/104380 – vsync 2013-04-18 15:15:32

您是否試過將initial-scale=1.0添加到您的內容？這應該可行，但如果不行的話，我可能會嘗試在那裏拋出更多的屬性。你可以閱讀更多關於所有different viewport properties here。

來源

2013-03-08 16:38:24 jmeas

是的，我已經嘗試了幾乎所有我能想到的組合 – Fraser 2013-03-08 16:41:45

不同版本的Android以不同的方式處理視口。

您使用的是哪個版本的Android？

這裏是我的跛腳的javascript砍來解決它：

<head> 
    <!-- other stuff in the head tag goes here --> 
    <script type="text/javascript"> 
    function viewport_to_device_width() { 
     // omit viewport meta tag (to force setting initial scale to full extent) by returning false 
     var b = true; 
     if (window.navigator.userAgent.match(/android 2.2/i) || window.navigator.userAgent.match(/android 2.3/i) || window.navigator.userAgent.match(/android 4.0/i)) { 
     b = false; 
     } else if (window.navigator.userAgent.match(/android/i) && window.navigator.userAgent.match(/Linux armv7l/i) && window.navigator.userAgent.match(/fennec/i)) { 
     b = false; 
     } 
     return b; 
    } 
    if (viewport_to_device_width()) { 
     // omit viewport meta tag for Android 2.2 and Android 4.0 to force setting initial scale to full extent 
     document.write('<meta name="viewport" content="width=device-width">'); 
    } 
    </script> 
    <noscript> 
    <meta name="viewport" content="width=device-width"> 
    </noscript> 
</head>

來源

2013-03-08 17:07:20 Teddy

你的頁面被裁剪，因爲你的瀏覽器的CSS像素的大小是比你的設備上的物理像素的大小。

嘗試將此JavaScript插入到標題中，以解決您的問題。

<script type="text/javascript"> 

    var scale = 1/window.devicePixelRatio; 

    var viewportTag = "<meta id=\"meta1\" name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=1, user-scalable=no\"/>";   

    document.write(viewportTag);   

</script>

來源

2013-03-09 06:44:37 bjhamltn

-1

不同的瀏覽器工作方式不同。我唯一可以在Nexus 7上正常工作的瀏覽器是Dolphin，它在HTML5按鈕等方面還存在其他問題。

來源

2013-03-09 15:03:24 Donelson

Android平板電腦看似忽略元視口

回答

相關問題