見出し画像

WordpressテーマSWELLでiPhone画面が崩れた【対処法】

WordpressのテーマSWELLを使ってサイトを作成しています。
今回、PC・タブレットは問題ないものの、スマホ(iPhone7で確認)だけが画面が崩れる現象がおきました。

解決したので、備忘録にまとめます。

よく言われる解決方法
(1)プラグインとの相性が悪いのでそれぞれ切ってみる
(2)テーマを一旦違うのにかえる
(3)キャッシュオフ
(4)cssの見直し

それぞれやってもダメだったのでheader.phpのmetaを変更してみることにしました。

元々のコードは以下でした

<meta name="viewport" content="width=device-width,viewport-fit=cover">


'viewport-fit=cover'はフルスクリーン表示を指示しますが、初期の拡大倍率が指定されていないので、各ブラウザのデフォルトによって予期しないレイアウト崩れがある・・・ので

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

initial-scale=1.0 を追加しました。
ビューポートの幅をデバイスの幅に設定し、初期の拡大倍率を1.0(実寸表示)に設定しています。

これによって、正しく表示されるようになりました。

ちなみに、親テーマのheader.phpを変更するのは自己責任になるので、必ず変更前のコードのバックアップは取ってくださいね。

よろしければ、サポートをお願いします! サポートはとっても励みになります!!