2017年10月25日水曜日

スマホサイトをピンチで拡大できるようにするスマホ用ブックマークレット

スクリプトを書いてブックマークレットにしたけど書いた後でブラウザやandroidの設定で拡大できることを知った。
  • android版firefoxでは「設定」→「アクセシビリティ」 で「ズームを常に有効にする」をオンにする
  • android版chromeでは「設定」→「ユーザー補助機能」で「強制的にズームを有効にする 」をオンにする
  • androidは設定→ユーザー補助→拡大操作をONにすればすべてのアプリで表示を拡大できる

スマホやタブレットのブラウザでモバイルサイトを見るとき拡大できないことがある。視力の悪い人間にとっては不便この上ない。で拡大できるようにするスクリプトを書いてgist.github に「スマホサイト(モバイル用ウェブページ)を拡大(ズーム、拡大縮小)できるようにする」を公開した。
上記スクリプトを簡単に使えるようにブックマークレット化した。
動作確認ブラウザ:firefox(nightly)58, chrome61 (いずれもandroid7.0)

ZoomMe! v.0.1.1インラインコード版←これをブックマークに登録して、拡大したいページを表示しているときに実行する。特に結果表示はしないので実際にピンチで拡大操作して効果を確認。
スマホでブックマークレットを登録して使う方法【Android版Firefox編】
スマホでブックマークレットを登録して使う方法【Android版Chrome編】

【Chromeでの拡大操作の仕方】
ChromeではZoomMe実行後そのままピンチで拡大操作しても拡大できない。次のどちらかのやり方で拡大できる。
  • 少しスクロールさせて新しい部分を表示させてそこに一方の指を置いてピンチする
  • ブラウザのメニューからページ内検索を表示させそれを閉じてからピンチする
一度拡大に成功したら後はどこでピンチしても拡大できる

備考

firefoxならアドオンの tampermonkey を入れてこのスクリプトのリンクに飛んでインストールするのもいい。いちいちブックマークレットをタップする面倒もなくページを開いたときに自動で実行されるようになる。
*自分の環境では tampermonkey へのスクリプトインストールが1回で成功しない。「インストール」ボタンを押してページが自動で閉じたら成功なのでそれまで何度もボタンを押す必要があった。

実行したいときだけ実行するほうがいいならブックマークレットがいい。

0 件のコメント:

コメントを投稿