如果android或iphone更改元視口標記

Question

我想更改基於android或iphone的檢測元視口標記。我有這樣的代碼，但它不工作：

<script type="text/javascript"> 
var metas = document.getElementsByTagName('meta'); 
var i; 
var ua = navigator.userAgent; 

var isAndroid = navigator.userAgent.match(/Android/i) !=null; 
var isAndroid = /Android/i.test(ua); 

var isiPhone = navigator.userAgent.match(/iPhone/i) !=null; 
var isiPhone = /iPhone/i.test(ua); 

if(isiPhone) { 
for (i=0; i<metas.length; i++) { 
    if (metas[i].name == "viewport") { 
    metas[i].content = ""; 
    } 
} 
} else if(isAndroid) { 
for (i=0; i<metas.length; i++) { 
    if (metas[i].name == "viewport") { 
    metas[i].content = ""; 
    } 
} 
} else { 
for (i=0; i<metas.length; i++) { 
    if (metas[i].name == "viewport") { 
    metas[i].content = "width=device-width, initial-scale=.5"; 
    } 
} 
} 
</script> 

我想這個代碼作爲測試，它工作得很好：

<script type="text/javascript"> 
var isiPad = navigator.userAgent.match(/iPad/i) != null; 
var ua = navigator.userAgent; 
var isiPad = /iPad/i.test(ua) || /iPhone OS 4_3_3/i.test(ua) || /iPhone OS 4_3_3/i.test(ua); 

var isAndroid = navigator.userAgent.match(/Android/i) !=null; 
var isAndroid = /Android/i.test(ua); 

var isiPhone = navigator.userAgent.match(/iPhone/i) !=null; 
var isiPhone = /iPhone/i.test(ua); 

if(isiPad) { 
alert("hello ipad!"); 
} else if(isAndroid) { 
alert("hello android!"); 
} else if(isiPhone) { 
alert("hello iphone!"); 
} 
</script> 

任何想法，我在做什麼錯的meta標籤代碼？

Answer 1

目標中繼檢視和測試用戶代理：

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

var iOS_iphone = (navigator.userAgent.match(/(iPhone)/i) ? true : false); 

    if (iOS_iphone==true){ 
     viewport.setAttribute('content', 'width=device-width, initial-scale=0.2, maximum-scale=0.2, user-scalable=no'); 
     } 

    if(navigator.userAgent.match(/Android/i)){ 
     viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'); 
     } 
    } 

Answer 2

我使用下面的代碼，以便僅iPad的用戶比例。它不依賴於jQuery，因此可以放在頭部，在視口元之後，以及任何其他外部腳本之前，爲了全部原因。

<!-- Allow zooming for iPad only --> 
<script> 
    if (navigator.userAgent.match(/iPad/i)) { 
     var viewport = document.querySelector("meta[name=viewport]"); 
     viewport.setAttribute('content', 'width=device-width; initial-scale=1; user-scalable=1;'); 
    } 
</script> 

Answer 3

我使用了開源的Mobile Detect php腳本。下面是我下載輕量級腳本後所需要的全部內容：

include 'Mobile_Detect.php'; 
$detect = new Mobile_Detect(); 
if ($detect->isMobile() && !$detect->isTablet()) 
    echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />';