4
2

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 3 years have passed since last update.

Iphone5/IphoneSE/Galaxy Foldのレスポンシブ対応でつまずかないためにheadに記載すること

Last updated at Posted at 2021-03-19

#はじめに
web制作で、Iphone5・SE/Galaxy Foldといった機種へレスポンシブ対応することに悩んでいた。
Iphone5・SEなら画面幅が320px、Galaxy Foldなら280px。デバイス幅が狭く、どうしてもレイアウトが崩れてしまっていた。メディアクエリを用いてmax-widthで制御したり、mixinでIphone5用の関数を作成したりして対応していた。これらの問題を、head内にコードを書くことによって解決する方法を書きます。

#解決策

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/viewport-extra@1.0.3/dist/viewport-extra.min.js"></script>
<script>new ViewportExtra(任意)</script>

head内に上の3行を付け加える。各行について軽く説明をする。
###1行目
1行目は仮想的なviewportを作成してくれる。レスポンシブ対応させる時は書いておいた方がいい。
詳しく知りたい方はソースをコピペして検索すれば詳しい記事がたくさんでてくる。
###2行目
2行目はjsdelivrのCDNを用いてviewport-extra.min.jsを読み込む。これにより、3行目のViewExtra関数が使用できるようになる。
###3行目
3行目はjsdelivrのプラグインであるviewport-extraを用いる。
ViewportExtra(X)
Xには任意の数字を入れるだけ。

#例
IphoneXの横幅は375px。
Iphone5の横幅は320px。

ViewportExtra(375)とした場合、
375:320 = 1:x
という式になりx=0.85333333...
Iphone5ではIphoneXの約85%縮小されたコンテンツが表示される。
メディアクエリは必要なくなる。
スマホで要素がはみ出したせいで横スクロールしている、、、なんて事態も解消できる。

#結果
この三行を入れることで、デバイスの幅よりコンテンツ幅が広い場合にデバイスの幅を守ったまま、コンテンツの幅を縮小してデバイスに表示してくれる。メリットとして幅がX以下のデバイスでメディアクエリを使う必要がなくなる。また、スマホ閲覧時にコンテンツがbodyからはみ出して、横スクロールが発生することもなくなる。

4
2
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
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?