@viewport不會在Safari移動設備（iPad 2）

@viewport不會在Safari移動工作（新iPad 2）@viewport不會在Safari移動設備（iPad 2）

我不能使用<meta name="viewport" ... />工作，我只能用CSS。

的UserAgent：Mozilla的/ 5.0（iPad的，...爲AppleWebKit/534.46 ... Safari瀏覽器/ 7534.48.3）

@-webkit-viewport { 
width: 480px; 
zoom: 2.0; 
user-zoom: zoom; 
} 
@-moz-viewport { 
width: 480px; 
zoom: 2.0; 
user-zoom: zoom; 
} 
@-ms-viewport { 
width: 480px; 
zoom: 2.0; 
user-zoom: zoom; 
} 
@-o-viewport { 
width: 480px; 
zoom: 2.0; 
user-zoom: zoom; 
} 
@viewport { 
    width: 480px; 
    zoom: 2.0; 
    user-zoom: zoom; 
}

來源

2013-04-08 Ivan

據我所知，您必須在Safari Mobile（iPad和iPhone safari）上使用元標記，並且沒有它（或者根本就沒有）@viewport不起作用。 – 2013-04-08 14:49:12

你的在哪裏？ – 2013-04-08 14:49:27

我不能使用元標記，只有CSS。 – Ivan 2013-04-08 14:52:09

你必須以某種觸發視口，通過<meta>或<javascript>

將帖子

original source

使用JavaScript用於iPhone和iPad的定位

上面顯示的元標記工作得很好，但是，您也可以使用JavaScript來做同樣的事情，因爲iPad和iPhone都支持腳本語言。以下JavaScript功能檢測，並通過使用該窗口對象的innerWidth屬性並定期設置體元件的定向屬性（在這種情況下每4秒）設置在設備的視口取向：

<script type="text/javascript"> 
var updateLayout = function() { 
    if (window.innerWidth != currentWidth) { 
    currentWidth = window.innerWidth; 
    var orient = (currentWidth == 320) ? "profile" : "landscape"; 
    document.body.setAttribute("orient", orient); 
    window.scrollTo(0, 1); 
    } 
}; 

iPhone.DomLoad(updateLayout); 
setInterval(updateLayout, 400); 
</script>

可以放置上面的代碼片段顯示在您的iPhone/iPad就緒網頁的HEAD中，並且它會將顯示設置爲適當的方向設置。

來源

2013-04-08 14:51:33

@jacob OP在發佈答案後進行了修改。 – 2013-04-08 14:54:52

@viewport不會在Safari移動設備（iPad 2）

回答

相關問題