回答編集履歴
1
原因・結果の追加
test
CHANGED
|
@@ -15,3 +15,15 @@
|
|
|
15
15
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
|
|
16
16
|
|
|
17
17
|
```
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
結論を言うとPCでブラウザの幅を縮めただけでは正確なスマホ表示にはなりません。
|
|
22
|
+
|
|
23
|
+
PCブラウザでは幅を縮めるとviewportの設定が反映された状態で表示されます。実質それは正しいmeta viewportのコードを設定していなくても設定した状態が反映されるということなので正確とは言えません。
|
|
24
|
+
|
|
25
|
+
それらの有無を含めたサイト内容を表示することが本質的なスマホ表示となるわけですが、上記の通りPCで幅を縮めてもその結果は得られないため、PC上で正確な表示を得たい場合はデベロッパーツールを使用します。
|
|
26
|
+
|
|
27
|
+
今回はviewportのタグが不適切だったことが原因で実際にスマホでサイトを確認した際に上記のタグが効いていない画面が反映されました。質問文にある、文字サイズが適正でない・余白が多い・PCで幅を縮めた画面と違う、というのはこの状態を表しておりサイト表示がスマホに適正化されていない状態です。
|
|
28
|
+
|
|
29
|
+
meta viewportのタグをコピペで使っている場合はサイトに合っていない可能性があるので適切なものを使用します。
|