使用窗口方向來修復ipad縮放問題

所以我相信你已經熟悉了ipad在旋轉時遇到的一個小問題。當用戶旋轉時，ipad想要保持初始縮放比例，並在放棄時放大縮小。使用窗口方向來修復ipad縮放問題

很多人都認爲這個

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

但它不允許用戶放大和縮小網頁的再偉大的工程糾正它。我很好奇，如果有方法檢測方向更改交換視口信息，然後重置。

例如

上載我的視口將

<meta name="viewport" id="view-port" content="width=device-width, initial-scale=1.0"/>

那麼理論上有一些JS，做這樣的事情：

window.onorientationchange = function() { 
    $("#view-port").attr("content", "width=device-width, maximum-scale = 1.0, initial- scale= 1.0"); 
    setTimeout("resetMetaTag()", 500); 
}; 

    var resetMetaTag = function() { 
    $("#view-port").attr("content", "width=device-width, initial-scale= 1.0"); 
    console.log($("#view-port").attr("content")); 
    };

這不起作用，因爲而不是交換在定向之前的視口是異步執行的。有沒有辦法檢測到一種「即將旋轉」或在屏幕重新顯示之前插入一個功能？

這將幫助很多。

來源

2012-01-10 Brodie

夫婦在這裏回答，允許用戶放大和縮小，將user-scalable=1添加到視口屬性並刪除maximum-scale=1.0，或將其更改爲更高的值。 maximum-scale=1.0意味着正是這樣，用戶將無法縮放屏幕比目前的水平任何更大：

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

如果要檢測的方向變化，附加一個事件監聽器窗口：

window.addEventListener('orientationchange', updateOrientation, false);

在功能updateOrientation的，你可以檢測到設備是在方向和重置視相應屬性：

function updateOrientation() { 
    if (!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) { 
    return; 
    } 

    var viewport = document.querySelector("meta[name=viewport]"); 

    switch (window.orientation) { 
    case 0: //portrait 
     //set the viewport attributes to whatever you want! 
     viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;'); 
     break; 
    case 90: case -90: //landscape 
     viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;'); 
     break; 
    default: 
     viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;'); 
     break; 
    } 
}

來源

2012-01-10 17:07:47

我明白這一點。我想我想知道的是我可以重置旋轉事件的初始縮放，我知道如何聽旋轉事件，但我想重置初始縮放。 – Brodie 2012-01-10 17:14:29

我的回答說明瞭如何......當您切換方向時，您可以設置視口的屬性。無論你最初的變焦是什麼，只需在那裏重新設置即可。 – 2012-01-10 19:04:42

我明白了，但我的問題是要求如何禁用縮放並在旋轉發生後重新啓用縮放。我不想放大，但我也不希望用戶無法放大和縮小。 – Brodie 2012-01-10 19:08:49

試試這個工作對我來說：

<meta name="viewport" content="width=device-height, minimum-scale=1, user-scalable=1;">

現在當你旋轉ipad它檢測到正確的比例。

來源

2013-03-01 01:04:16

使用窗口方向來修復ipad縮放問題

回答

相關問題