VOCALOID ボーカロイド B5 下敷き [鏡音リン・レン] Ver.03

暑くなってまいりました。

先日、コハルデザインさんから納品されたスマホ向けHTMLにちょっと感動したのでメモ。

スマホに対応されたサイトは拡大できないから不満

私はずっと思ってたのです。
「せっかくスマホで見てるんだから拡大させろ」と。
でも横スクロールバーが出るよりマシかと思って思考停止してました。

あちこちで書かれているviewportの罠

HTMLをスマホ対応させる解説によくでてくるこの呪文。

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

これをこう変えるだけでOK。

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

なんてことはないです。
拡大を制限している記述をカットしただけです。

私のような何も考えずにコピペしてるだけのインチキプログラマーには出ない発想ですねww

横スクロールバーは出ません

拡大操作をしなければ、普通のスマホ対応です。
拡大操作をすると文字が大きくなります。もちろん画像も。
縮小しても、スマホ対応横幅以上に縮小されません。

つまりこれでスマホに対応しつつユーザーによる拡大操作に対応する事ができるというわけです。
このブログもそのようにしていますので、ぜひ拡大してみてください。

プチ技ですね。