single.php

Javascript viewportを変更する

Javscriptネタです。

最近は、iPhone/Androidのブラウザで表示する画面を作る時に、Viewportの設定は必須になってきています。
iPhoneとかで画面がかなり大きく表示されるので、とても便利なんですがuser-scalable(ユーザ操作によるページの拡大や縮小)とかはページによっては変更したい時もあります。

通常のViewportの設定は、htmlのheadタグにこんな感じで書きます。

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

調べたら出来たので、備忘録として

htmlのheadタグに直書きした場合は出来ないみたいなので、javascriptでタグを作って、それを操作します。

  <script type="text/javascript">
    var vp = document.createElement('meta');
    vp.setAttribute('name', 'viewport');
    vp.setAttribute('content', 'user-scalable=0');
    document.getElementsByTagName('head')[0].appendChild(vp);
  </script>

後は、javascriptからvpオブジェクトにアクセスできれば、setAttributeで変更できるという訳です。
実際にやってみると分かりますが、user-scalableなどは変更が即変更されますが、widthなどは、変更して表示にすぐに影響があるわけでは無いみたいなので、使い方には注意が必要になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です