我希望我的網頁顯示為全屏，并禁止在所有移動設備上縮放。使用meta標簽：<meta name="viewport" content="width=1165, user-scalable=no">我可以在iPhone / iPad上執行此操作，但是在Android設備上，該網站放大了約125％。如果我使用標簽<meta name="viewport" content="width=max-device-width, user-scalable=no">我得到相反的結果。因此，它可以在Android上運行，但不能在iPad / iPhone上運行。
3 回答
牛魔王的故事
TA貢獻1830條經驗 獲得超3個贊
不幸的是，每個瀏覽器都有自己的視口元標記實現。不同的組合將在不同的瀏覽器上工作。
Android 2.2：似乎根本不支持視口元標記。
Android 2.3.x / 3.x：通過設置user-scalable = no，您也可以自己禁用視口meta標簽的縮放。這可能就是您的寬度選項無效的原因。要允許瀏覽器縮放內容，您需要設置user-scalable = yes，然后要禁用縮放，可以將最小和最大縮放比例設置為相同的值，以使其不會縮小或增長。以最初的比例進行玩具，直到您的站點貼合為止。
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
Android 4.x：與2.3.x相同的規則適用，只是不再遵守最小和最大比例，如果您使用user-scalable = yes，則用戶始終可以縮放，將其設置為“ no”意味著您自己的比例將被忽略，這就是我現在面臨的問題，這使我陷入了這個問題。您似乎無法在4.x中同時禁用縮放功能。
iOS / Safari（已測試4.x / 5.x）：縮放按預期工作，您可以使用user-scalable = 0禁用縮放（關鍵字yes / no在4.x中不起作用）。iOS / Safari也沒有target-densitydpi的概念，因此您應該避免使用它來避免錯誤。您不需要最小值和最大值，因為您可以按預期的方式關閉縮放。僅使用寬度，否則會遇到iOS定向錯誤
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
Chrome：縮放比例像在iOS中一樣按預期工作，最小和最大均受尊重，您可以使用user-scalable = no來關閉縮放。
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
結論：在檢測到一些基本的瀏覽器/設備之后，您可以使用一些相當簡單的JS來相應地設置內容。我知道這種檢測方法是不受歡迎的，但是在這種情況下，這幾乎是不可避免的，因為每個供應商都已經去做自己的事！希望這對幫助視口的人們有所幫助，如果有人可以在不使用視口的情況下禁用Android 4.x縮放功能，請告訴我。
[編輯]
Android 4.x Chrome瀏覽器（我認為大多數國家/地區已預裝）：您可以確保用戶無法縮放并且頁面為全屏。缺點：您必須確保內容具有固定的寬度。我尚未在較低的Android版本上對此進行過測試。為此，請參見示例：
<meta name="viewport" content="width=620, user-scalable=no" />
[編輯2]
iOS / Safari 7.1：自v7.1起，Apple為視口元標記引入了一個新標記minimal-ui。為了協助全屏應用程序，這會隱藏地址欄和底部工具欄，以提供全屏體驗（不是全屏API，而是關閉且不需要用戶接受）。它的確帶有很多錯誤，并且在iPad中不起作用。
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />
[編輯3]
iOS / Safari 8 Beta 4：minimal-ui在此版本中，Apple現在已刪除了EDIT 2中提到的視口元標記。來源-WebKit注釋
守著星空守著你
TA貢獻1799條經驗 獲得超8個贊
的HTML
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>
jQuery的
選項1：
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
選項2：
var deviceSpecific = {
iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
$('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}
如果發現不一致，則第二種方法更不得已。
- 3 回答
- 0 關注
- 599 瀏覽
添加回答
舉報
0/150
提交
取消