當設備改變方向時，Android設備不能縮放我的html網站

我有一個針對不同設備上的縱向視圖進行了優化的html頁面。通常用此meta標籤切換到橫向模式時，頁面會自動擴展到設備寬度：當設備改變方向時，Android設備不能縮放我的html網站

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

工作正常，在iOS上，但不會對我的里程碑和歌Nexus One在所有的工作。頁面只停留在320像素寬度，就像是用縱向視圖一樣。另外，將視口元標記中的寬度或初始比例更改爲某個值並不會產生任何影響，因爲它應根據官方的android文檔進行設置。我也試圖做一個簡單的頁面進行測試，但沒有奏效。讓瀏覽器更改比例尺的唯一機會是完全避免視口元標記，但隨後它似乎隨機縮放，大部分是縮小到非常小的範圍。

這是一個非常簡單的測試頁：click

也許有人碰到這個問題就來了。我幾小時內找不到解決方案...

謝謝！

來源

2011-10-09 butters

在一個新項目期間，我對這個主題做了一些更多的研究並找到了解決方案。它做我認爲Android瀏覽器應該自己做的事情。

首先檢查屏幕分辨率（寬度），然後通過JavaScript代碼縮放網站。我主要使用JQuery構建我的項目，所以我使用了它的一些功能。

檢查屏幕的寬度：

newWidth = $(window).width();

你也可以使用原生的JavaScript（DOM）函數來獲取寬度避免JQuery的。像window.width或innerwidth。不知道的心。

通過把屏幕的實際寬度與您的頁面大小來計算縮放級別：

zoomlevel = newWidth/defaultWidth;

然後調整屏幕的縮放級別：中

document.getElementById("wrapper").style.zoom = zoomlevel; 
document.getElementById("wrapper").style.MozTransform = 'scale('+zoomlevel+')';

「包裝」課程是整個頁面的一個div。如果您只想支持原生瀏覽器，並且在Firefox中測試時使您的頁面看起來有點奇怪，則不需要MozTransform。

呼叫，當瀏覽器窗口大小調整驗證碼：

$(window).resize(function() { CODE });

本身我想你可以使用一個在onResize事件。

在Andoid-Browser，Mobile Safari和OS 6+的BlackBerry設備上，此工作正常。無法在Windows Mobile上測試它。

正如我在最後提到的那樣，這只是我所期望的移動瀏覽器無論如何都會做的，但除了Safari之外，並沒有這樣做。

來源

2011-10-22 12:15:11 butters

當設備改變方向時，Android設備不能縮放我的html網站

回答

相關問題