質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1906閲覧

1つのviewport設定でどのくらいのデバイスに対応できるのですか?

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/04/06 11:42

編集2016/04/06 11:45

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設定の書き方についても何かこうしたほうがいいなどありましたらご教示お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<meta name="viewport" content="initial-scale=1">

基本的にはこれ1行で使うことができます。

また、どのデバイスに対応することができますか?
という質問に対しては全てのdeviseで対応することが可能です。
実際にコーディングをする際は、viewportの設定で「これはスマホとかにしたらそれ用にレンダリング変えるよーーー横幅とかスマホの横幅に調整するよー」っていう宣言になるので
実際に画面サイズによってレイアウトを帰る場合は、
cssファイルを分けたり、1つのファイルの中で「この画面幅より小さい場合はこのcss,そうじゃないときはこっちのcss」みたいに記述を行ったりします。

ちなみに質問者様もおっしゃっていましたが、スマホでレイアウトを作成していたりすると一番のハマりどころはAndroidです。
Androidのブラウザは各メーカーが独自に手を加えているものなので、実装に差異があります。
なので、思わぬところでCSSが効かなかったり、昔のスマホだとdivのとじタグがないだけでブラウザが落ちるなど起こっていました。。。

ちょっと話がそれました。
1つのviewport設定でどのくらいのデバイスに対応できるのですか?
これは極端な話をすると0px ~ 限りなく大きいpxまで対応することができます!

投稿2016/04/06 14:55

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/04/07 10:38

回答ありがとうございます! 基本的には下記の書き方で平気で、androidなど一部のデバイスでレイアウトが崩れた場合 のみ対応を考えればいいという考え方だと認識しました。 <meta name="viewport" content="initial-scale=1"> 追加の質問で申し訳ないのですが、あなたがおっしゃった下記のことについてお聞きしたいことがあります。 「この画面幅より小さい場合はこのcss,そうじゃないときはこっちのcss」 これは調べてみたところメディアクエーという技術だとわかりました。 viewport設定と組み合わせることでレスポンシブウェブデザインを実現すると。 そこで自分で確かめてみようと思い、以下のような状況を作りました。 というのはhtmlファイル内にviewport設定を行い、div要素2つを作りました。1つはwidthを1000pxで固定し、もう1つはwidthを200pxで固定しました。これをiOSシミュレーターで確認したところ、1000pxで固定したほうは画面からハミ出てしまいました。このような場合にメディアクエリーをつかって画面からはみ出ないように設定するということでいいのでしょうか?(たとえばこの画面幅より小さい場合はwidthを200pxに設定し直すなど) それとも、そもそもdivのwidthをpxで固定してしまったことがよろしくないことなのでしょうか? 長々となってしまって申し訳ないのですが、回答していただければ幸いです。
MasakazuFukami

2016/04/07 10:46

その通りです! 980px以上(ここは各サイトで何px以上にするかは違います) div1 → width:1000px; div2 → width:200px; 768px以上 980px未満 div1 → width:100%; div2 → width:200px; 640px以上768px未満 div1 → width:100%; div2 → width:200px; 640px未満 div1 → width:100%; div2 → width:200px; みたいな感じですね! 今回は1000pxだったので後半が一緒になってしまいましたが! 質問者様がおっしゃっているとおり、デバイスの幅ごとにcssを指定しなおしたりします。 また、これは実体験なのですが、 PC→mobileとコーディングやデザインをしていくとPCで表現できることが多いがゆえに、mobileに対応させるのが難しくなっていきます。 なのでmobile→tablet→PCとデザイン・コーディングしていくほうがうまく開発することができます。 頑張ってください!
退会済みユーザー

退会済みユーザー

2016/04/07 11:38

回答ありがとうございます! アドバイスもしていただきありがとうございます!
MasakazuFukami

2016/04/07 12:08

はい!そう言っていただけて光栄です!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問