在Android設備上使用瀏覽器的元視口標記

我正在開發一個移動網站，它在移動Safari上效果很好。但是，在Android設備上，網站放大得太多，但僅限於某些設備。我在我的朋友的手機上試了一下，他的HTC Magic運行的是Android 2.1，並且它顯示正常，但是它顯示在模擬器上使用2.1和我的手機（運行Android 1.5的摩托羅拉Backflip放大了太多）。任何想法爲什麼有不一致？在Android設備上使用瀏覽器的元視口標記

的鏈接是：http://itphosting1.com/dtang/jarritos/

這是我使用的中繼檢視區標記：

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

我認爲這可能與設備之間的分辨率和屏幕尺寸上的差異有關。真的不知道如何解決，雖然...

來源

2011-03-02 skaterdav85

如何將其更改爲類似

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

來源

2011-03-02 08:53:40 nLL

這沒有奏效。我認爲這可能與分辨率差異和屏幕尺寸的組合有關，因爲它們在Android設備之間有所不同。我遇到了這個博客文章（http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html），這可能是我的問題的答案，但我真的不明白我應該怎麼做媒體查詢。 – skaterdav85 2011-03-06 07:14:14

我也有類似的問題，但解決方案是非常依賴於網站的我的工作設置上。在Android 2.2及更低版本中，該網站無法正確縮放至設備，而媒體查詢會響應我的縮放 - 縮小，更寬的媒體查詢，更大的媒體查詢以及較小寬度的媒體查詢。

對於解決方案，使用<meta name="viewport" content="width=device-width, initial-scale=1">就足夠了，就視口元標記而言。然後我不得不考慮的是頁面的主容器在CSS中設置了明確的寬度。雖然此寬度將響應其他瀏覽器中視口的寬度，但在這種情況下不會。我可以將明確聲明的寬度保留在CSS中，只要我確保第一個媒體查詢啓動時，主容器將被設置爲100％寬度。所以基本上，使用LESS syntax：

@containerWidth: 1080px; 

#page { 
    width: @containerWidth; 
} 

@media screen and (max-width: @containerWidth) { 
    #page { 
     width: 100%; 
    } 
}

來源

2013-11-26 17:37:32 fredrikekelund

在Android設備上使用瀏覽器的元視口標記

回答

相關問題