コスメ水槽waterTank

30代・乾燥肌の管理人の年齢肌対策。スキンケアコスメの紹介と、時々メイク。綺麗なおばさん目指します。

[Stinger5]☆スマホでピンチ操作(2本指で拡大縮小)できるようにするよ

 

目標

spread pinch

このブログ、化粧品の画像をたくさん載せています。
パッケージの成分表示は文字がとても細かいので、スマホの小さな画面ではちょっと読みにくい。

ところが、Stinger5の初期状態ではスマホでピンチ操作(2本指で拡大縮小)ができません。
それはそれでデザイン上の利点があるのですが、このブログではスマホでピンチ操作(2本指で拡大縮小)できるようにカスタマイズしています。

直すのはたった1行~。

修正するソースファイル

ここで使用しているStinger5はver20150505です。

  • header.php

viewport の設定を修正します - header.php

修正前

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

修正後

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

すみません、ソースの1行が長いので右端までスクロールして下さい。

最後の「,user-scalable=no」を「,user-scalable=yes」にするだけ。この指定がピンチ操作の許可/不許可を制御します。

以上! これだけ!

参考にしたサイト

  • TOUCH GESTURE ICONS | DESIGNED FOR MULTI-TOUCH DEVICES スマホ操作のアイコン集。商用フリー。vectorのファイル(PSD、EPS)とPNG形式があります。記事トップで使わせていただきました。背景が透明なので、どんなサイトでも使いやすそう。
    そしてこのアイコン集見てて知ったんですけど、日本語でピンチアウト / ピンチインって呼んでる操作、英語だとspread / pinch なんですね。なんでピンチインって翻訳したんだろう?

 - ブログひっこし ,