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