質問: viewportの書き方をネットで調べると、だいたいこのような書き方を紹介しているサイトなどを見つけます。 しかし、この書き方をおかしいというサイトもいくつかあり、そのようなサイトでは下記のような書き方を推奨しています。なんでもinitial-scaleを指定すれば、widthとheightはプラウザが自動で設定してくれるとか。 一応自分が参照したサイトのリンクを貼っておきます。 Quick Tip: Don’t Forget the Viewport Meta Tag Configuring the Viewport 自分は最近webデザインに興味を持ち、レスポンシブウェブデザインに必要なviewportを調べていたのですが、「androidの端末には上記の書き方では対応できない」、「スマホやタブレットを横にした時にレイアウトが崩れる」とかいろいろな記事を見かけます。 そこでタイトルにあるように、上記のようなよくあるviewport設定でどのくらいのデバイスに対応できるのでしょうか?また、viewport設定の書き方についても何かこうしたほうがいいなどありましたらご教示お願いします。
回答: 基本的にはこれ1行で使うことができます。 また、どのデバイスに対応することができますか? という質問に対しては全てのdeviseで対応することが可能です。 実際にコーディングをする際は、viewportの設定で「これはスマホとかにしたらそれ用にレンダリング変えるよーーー横幅とかスマホの横幅に調整するよー」っていう宣言になるので 実際に画面サイズによってレイアウトを帰る場合は、 cssファイルを分けたり、1つのファイルの中で「この画面幅より小さい場合はこのcss,そうじゃないときはこっちのcss」みたいに記述を行ったりします。 ちなみに質問者様もおっしゃっていましたが、スマホでレイアウトを作成していたりすると一番のハマりどころはAndroidです。 Androidのブラウザは各メーカーが独自に手を加えているものなので、実装に差異があります。 なので、思わぬところでCSSが効かなかったり、昔のスマホだとdivのとじタグがないだけでブラウザが落ちるなど起こっていました。。。 ちょっと話がそれました。 1つのviewport設定でどのくらいのデバイスに対応できるのですか? これは極端な話をすると0px ~ 限りなく大きいpxまで対応することができます!