0

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>

メタタグコードで何が間違っているのか分かりますか?

4

3 に答える 3

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');
        }
    }
于 2012-12-07T14:11:38.807 に答える
0

オープン ソースの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" />';
于 2013-05-25T01:27:53.607 に答える
0

次のコードを使用して、iPad でのみユーザーのスケーリングを許可しています。これは jQuery に依存しないため、head のビューポート メタの後、パフォーマンス上の理由から他の外部スクリプトの前に配置できます。

<!-- 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>
于 2013-01-07T20:14:22.420 に答える