今見てるページをズーム可能にするブックマークレット

iPhoneやiPadでWebを見ていて、ズームがロックされてることあるよね。

あれをズーム可能にするブックマークレットを作った。

javascript:(function(){var ms=document.getElementsByTagName('meta');for(var i=0;i<ms.length;i++){if(ms[i].getAttribute('name')=='viewport'){var w=ms[i].getAttribute('content').replace(/^.*(width=[a-zA-Z0-9-]+).*$/,'$1');var m=document.createElement('meta');m.setAttribute('name','viewport');m.setAttribute('content','initial-scale=1.0,minimum-scale=0.25,maximum-scale=1.6,'+w+',user-scalable=yes');document.getElementsByTagName('head')[0].appendChild(m);break;}}return void(0);})();

登録方法

iPhoneまたはiPadでは、以下の手順でどうぞ。他は知りません。

上記のコード(横に長いよ)をコピー。
適当なページ(このページでもいいよ)をいったんブックマーク登録。
そのブックマークの編集をする画面を開いて、タイトルの欄に好きな名前を入れて、アドレスの欄にコピーしたコードを貼り付ける。

使い方

ズームがロックされているページを開いたら、このブックマークレットを選択。
ズームできるようになる！

仕組み

コードをキレイに書くと以下の通り。

(function(){
  var ms = document.getElementsByTagName('meta');
  for(var i = 0; i < ms.length; i++){
    if(ms[i].getAttribute('name') == 'viewport'){
      var w = ms[i].getAttribute('content').replace(/^.*(width=[a-zA-Z0-9-]+).*$/, '$1');
      var m = document.createElement('meta');
      m.setAttribute('name', 'viewport');
      m.setAttribute('content', 'initial-scale=1.0,minimum-scale=0.25,maximum-scale=1.6,' + w + ',user-scalable=yes');
      document.getElementsByTagName('head')[0].appendChild(m);
      break;
    }
  }
  return void(0);
})();

元のmetaを探してwidthを取り出す。そして新しいmetaを作って挿入。widthだけは元の指定を尊重してあげようという発想。まあわかるよね。わからない人は、こういうWeb上で見かけたJavaScriptコードをわけもわからずコピペして実行するのは危険なのでやめた方がいい。