2016年1月21日

モバイルでのピンチ(指先で拡大・縮小)をできるようにするコード。

スポンサードリンク

 viewport について。
モバイルで見ている時に、
コンテンツを拡大したり縮小できるようにするかどうか。

スマホで表示を拡大・縮小できるようにする設定


 以前、こんな投稿を作りました。

モバイル表示の幅や拡大について、指定しておく。


viewportの設定です。
等倍でモバイル表示するようにしています。

理由は、レスポンシブデザインだから。


 さて、今回は、スマホでピンチ操作できるようにする方法です。
画像やリンクなど、細かい箇所を拡大表示できるようになります。

とても簡単です。

お使いのテーマによって多少違いますが、
とりあえず参考にどうぞ。

ちなみに私の使用テーマはWordPressのStinger5です。


 では設定します。

WordPress管理画面→

テーマの編集→

header.php→

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


を探します。

これを、以下の様に変更。


(このままコピーしないで下さい。UTF-8Nに変換して下さい。)


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



以上です。


 私はピンチをnoのままにしています。

というのも、自身がサイトを見ていて、
あまり拡大を使った事がないからです。

コンテンツ内容によっては、拡大できた方がいいみたいですね。
いかに見やすく便利か、で決めると良いでしょう。


参考にしたサイト

[Stinger5]☆スマホでピンチ操作(2本指で拡大縮小)できるようにするよ
http://watertankcosme.com/post-230/



 こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。


 当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。


 WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク