スマホの幅(width)固定サイトでviewportが駄目なのではなく、androidが駄目で、さらにはギャラクシーがダメ

viewportって説明しているサイトを読んで、理解したつもりでも言った通りならなくね？ってことが多々あって沸々としていたんですが、何が原因なのか分かりました。それはviewportがandroidとかでちゃんと実装できないのが原因でした。(¬˚∆˙)ﾉこんのー!!

例えばiphoneなら固定なら320px表示が一般的なんで画像を2倍のサイズで作りたいからAiとかPsでは640pxでWEBサイトのデザインを手がけますよね。そうしたら以下のようにviewportを設定したら一発OKです。

< meta name="viewport" content="width=320px" >

ええ、キレイに決まります。これでiOSならタブレットでもキレイにぴたっとぴったり決まります。(...ブログの使い方分からなくて、スペース入れてます)

しかし、androidのいくつかの端末でみると、微妙な挙動するんです。これでviewport糞って思ったんですが、糞なのは、設定通り動かないブラウザが原因ですわな。で、viewportでandroidもうまくできるよって記事が多いんですわ。でもダメなんですわ。原因はGALAXYで見たから？いやガラパゴスもだめですね。横に倒すとピッタリとならねぇ(縦の時点でできてねぇけど)。あぁ困った。みんなどうしてるのって検索してみても、「こうするとできる」→「いや、できないよ？実機で現に今目の前でできてねぇ」ってのがループ処理ですわ。沸々ですわ。

でも、救世主のページがありました。

Androidブラウザでviewportのwidth指定
いやー、さすがっすzoomですか。見事確認できるandroid端末達でぴったり決まりました、最高です。こういうサイト上位に出してねgoogle

で、続もあるんであわせて読んで実装しましょう。

続：Androidブラウザでviewportのwidth指定 - to-R

パララックスとか「いいね」とかzoomによる諸問題はありますが、「いいね」の解決方法は紹介したブログに記載があります。パララックスはもともとレスポンシブじゃないといけないから、こういう固定では作らないから今回のような問題(viewport)は遭遇しないはず。

以上です。