如果是Android或iPhone，請更改元視口標簽

Question

我想根據檢測到的android或iphone更改meta視口標簽。 我有以下代碼，但無法正常工作：

<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" />';