Android在使用固定寬度視口元標記時忽略最大比例尺

我有一個固定寬度網頁（640像素寬）。我希望這個頁面縮小到移動設備的寬度。但是，如果設備的原始寬度大於640像素，我不希望它拉伸。似乎很簡單：Android在使用固定寬度視口元標記時忽略最大比例尺

<meta name="viewport" content="width=640, maximum-scale=1.0" />

這可以在iPad/iPhone中按預期工作。但是，在Android平板電腦上（例如在橫向模式下），內容會被放大以適應顯示器。換句話說，Android只是忽略最大比例= 1。您可以看到有問題的示例頁面here。爲了完整起見，這裏是來源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test Viewport</title> 
    <meta name="viewport" content="width=640, maximum-scale=1.0" /> 
    <style> 
     div.bar { 
     position: absolute; 
     width: 636px; 
     height: 50px; 
     background-color: yellow; 
     border: 2px solid black; 
     left: 50%; 
     margin-left: -320px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="bar"> 
    </div> 
    </body> 
</html>

我一直在做很多研究和實驗的視口元標記。我已經閱讀了關於該主題的所有內容，但沒有看到這個看似基本的問題。

有兩點需要注意：

這不是一個目標densitydpi問題
設置視口寬度設備的寬度是不是在這種情況下有益的，因爲內容的寬度是固定的，大於（例如）手機的縱向設備寬度。如果我設置寬度=設備寬度，頁面不會自動縮小到適合手機..

非常感謝。

來源

2011-11-29 logidelic

經過敲我的頭靠在一張桌子，我已經找到了解決辦法：

遺憾的是，似乎iOS和Android只是表現不同（Android是很清楚沒有做規範忽略最大規模所說的話）。解決的辦法是使用基於分辨率專門的JavaScript：

如果屏幕寬度（參見下面的註釋）大於或等於固定的頁面寬度（640在我的例子），然後設置視薈萃標籤的內容寬屏幕寬度
，否則設置視口元標記的內容寬度固定頁面寬度（640）

普雷斯托。跛腳它需要JavaScript專業化，但這是生活。

注意，在iPad/iPhone的JavaScript screen.width不正確，如果設備是橫向模式（在iPad仍然報告縱向寬度而不是橫向寬度，不同於Android的這得到它的權利在這種情況下！）。因此，您需要在iPad/iPhone上檢查window.orientation並使用screen.height而不是screen.width如果您處於橫向模式。

來源

2011-11-30 19:15:52 logidelic

這看起來不錯，因爲我也遇到了與Android類似的問題。如果我試圖實現這一點，是否有我可以去獲得基本腳本的地方？由於我不是程序員，也不熟悉Javascript .. – kia4567

@logidelic請發佈您使用的腳本，以便其他人也可以修復相同的問題 – user2190488

我寧願使用

width=640, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi

而不只是最大規模財產的... Android的具體目標密度Dpi屬性，也許它可以解決你的問題。

來源

2011-11-30 23:11:23 ChristopheCVB

我不確定您的意思是「我寧願使用」，但是這並沒有解決問題。 – logidelic

在Android上不起作用。你不能像iPhone上的內容一樣適合Android上的內容...... OP是對的。 – Miro

以上禁用縮放在我的android – user2190488

Android在使用固定寬度視口元標記時忽略最大比例尺

回答

相關問題