0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

viewportを調査

Last updated at Posted at 2020-06-30

viewport関連のWebサイト記事や書籍を読んでも理解できないので

書籍『レスポンシブWebデザイン入門』のサンプルを使って試行してみました。

やったここと
でサンプルからcssを削除しviewportの設定ありなしで違いを確認

//viewportは有りと無し2種類を確認
<meta name="viewport" content="width=device-width, initial-scale=1">
//<meta name="viewport" content="width=device-width, initial-scale=1">

//cssは削除
<!-- <link rel="stylesheet" href="css/style.css"> -->

結果
『viewポートなし』は一部しか表示されずスクロールする必要が生じる
『viewポートあり』は画面サイズに応じて文字は折り返される。画像は画面サイズより大きいままとなる。

結論
文字を設定したviewportサイズで折り返してくれる機能
※違っていたら今後修正します

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?