スマホの幅(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)は遭遇しないはず。
以上です。