個別記事のページです

2016年2月 2日(火)
このエントリーをはてなブックマークに追加

スマホサイトで拡大操作に対応する方法

スマホに対応されたサイトは拡大ができず不満という方もいると思います。
特に、下のような画像の文字サイズが小さいと何と書いてあるか見えないですよね。
実はこれ、head内で書かれているviewportの設定が原因でした。

sumaho_l.png

HTMLをスマホ対応にさせる解説によく出てくるこのmetaタグを
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

拡大を制限している記述をカットし、このように変えます。
<meta name="viewport" content="width=device-width,initial-scale=1.0">

横スクロールバーは出ず、拡大操作をすると文字や画像が大きくなります。
逆に縮小してもスマホ対応横幅以上に縮小されません。
拡大ができずお困りの方は、ぜひこの方法をご活用ください!

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ