如何爲iphone或ipad設置視口？

我有一個網站，需要在iphone上使用0.3值的視口，但爲ipad 0.7。如何爲iphone或ipad設置視口？

有沒有辦法只爲iphone或ipad設置視口？

來源

2011-01-24 Moon

如果你不滿意你的答案，請評論他們，這樣人們可以嘗試改進他們。如果你是，接受其中之一。 – 2011-09-07 07:51:15

@fichek在這種情況下，這裏沒有答案回答OP的問題。這包括你自己的答案。在要求OP迴應之前，請重新閱讀以下問題：） – Ross 2012-05-21 12:51:19

我不確定您只能爲iPhone設置視口，但您可以設置媒體查詢，因此我只想設置iPhone的CSS。

通過爲iPhone（320x480）或iPad（1024x768）的設備寬度設置媒體查詢，您可能可以實現您想要的功能。

來源

2011-08-01 15:20:01

我用jQuery找到了一個簡單的方法！

一下添加到<head>標籤：

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

<script>if ($(window).width() < 600) { $('meta[name=viewport]').attr('content','initial-scale=0.54, maximum-scale=0.54, user-scalable=no'); }</script>

的<meta>標籤設置默認的規模和<script>標籤重新寫，如果設備屏幕寬度小於600個像素（我認爲所有的手機設備的視低於600像素）。

我到處都找不到一個簡單的解決辦法，所以我想出了這個:)

來源

2011-08-06 16:30:38 Sean

iPhone最初將窗口寬度設置爲960像素。 – Ross 2012-05-21 13:59:35

這對我無效 – 2013-06-12 18:11:15

如果您需要設置不同的視口，基於設備（iPhone/iPad的），你需要設置使用設備寬度視
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;"> 
什麼上面的語句會做設定的320像素視口上的iPhone 和768px的iPad..Guess這就是woudld轉化爲0.3 和0.7ü正在尋找。

這個工作，但只有後我意識到，這條線不會在...節！我愚蠢，但也許需要說。

謝謝！

來源

2011-09-10 14:55:38 testndtv

請注意，meta viewport是逗號分隔的列表，您不應該使用分號。

<meta name = "viewport" content = "width = 320, 
     initial-scale = 2.3, user-scalable = no">

來源： viewport syntax in Apple's documentation和 Configuring the Viewport – Apple article

（如果我有更多的聲譽分，我想補充一點的註釋）

來源

2011-12-30 19:46:08 babca

這裏是一個解決方案...

<!-- in head --> 
<meta id="viewport" name='viewport'> 
<script> 
    (function(doc) { 
     var viewport = document.getElementById('viewport'); 
     if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { 
      viewport.setAttribute("content", "initial-scale=0.3"); 
     } else if (navigator.userAgent.match(/iPad/i)) { 
      viewport.setAttribute("content", "initial-scale=0.7"); 
     } 
    }(document)); 
</script>

來源

2012-05-21 13:42:11 Ross

請參閱我的回答下面的如何動態設置l-zoom，以便整個網站在頁面加載時正確放大（適用於所有設備尺寸）。

Change tablet viewport to exactly show fixed dimension element

來源

2013-04-13 03:19:16

對於所有的移動設備，嘗試這樣的事情。

<meta name="viewport" content="width=1024"> 
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
    if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) { 
    $("meta[name='viewport']").attr("content", "width=640"); 
    } 
</script>

來源

2013-05-02 18:32:51 tim

Tim使用jQuery的腳本看起來很好。我改變了一點，它似乎爲我工作。我添加了一些比例參數。它爲我提供了iPhone和iPad上我的頁面顯示所需的結果。這裏是我補充說的：

maximum-scale=2.0; user-scalable=1;

來源

2013-08-21 07:54:52 John

如何爲iphone或ipad設置視口？

回答

相關問題