ほとんどのiOSで自作サイトの表示が崩れる

Question

自作サイトをロリポップサーバーで公開したのですが、iPhoneやiPadで見ると表示が大幅に崩れることが判明しました。

【自作サイト】
こちら になります
Examplesの項目の辺りから表示のズレが生じ、画像や文字が重なってしまっています。

【問題が発生した端末】
iPad mini4 → iOS 15.5
iPad Air3 → iOS 15.4.1
iPhone 11 → iOS 15.6
iPhone SE第2世代 → iOS 15.5
※iPhone SE以外は知人からの報告になります
※iPhone SEではSafariでもChromeでも同じように表示が崩れたため、ブラウザに原因があるわけではないようです

【問題が発生していない端末】
iPhone 5s → iOS 12.5.5
その他Android、Windows PCなど
※Chrome、Edgeの開発者ツールでディメンションをiPhone SEやiPad Miniに指定した際は問題なく表示されました

【その他の情報】
・画像の配置、空白の幅や高さの指定、フォントサイズの指定には基本vwを使用しています
・このサイトはHTML、CSS、JavaScriptで構成されています
・どのコードが原因かわかりかねたため、また全てのコードを載せると長くなってしまうため、お手数ですがコードはサイトをご参照いただけますと幸いです

自分なりに様々なキーワードで検索をかけたのですが、何が原因なのか、単位vwでここまで大幅に崩れることはあるのかなど、めぼしい情報は一切見つけられませんでした。

当方Webページ作成の勉強を始めたばかりですので、初歩的なことを伺っていましたら申し訳ございません。
解決法をご存知の方がいらっしゃいましたらご教授ください。よろしくお願いいたします。

【15:39追記】ご意見を受け、より短いコードで同じ問題が発生するものを作成できないか試してみます。
お忙しい方はそちらができ次第またご確認いただけますと幸いです。

【17:10追記】
最低限の要素のみ残したサイトを公開しました。
こちら になります。
手持ちのiPhone SE第2世代で検証しましたが、やはり同じ問題が発生しているようです。

以下にCSSのメインコンテンツの部分のコードを抜粋して貼ります。長くなってしまい申し訳ございません。

body {
    width: auto;
    background-image: url("img/background.png");
    background-size: 100%;
    display: flex;
    /*justify-content: center; も書いたけどなくても良さそう*/
}

/*以下メニュー*/

/*中略*/

/*以下メイン*/

#main {
    width: 62.5%;
}

#header {
    width: 100%;
}

#header-smp {
    display: none;
}

.blank0 {
    display: block;
    content: "";
    height: 6.3vw;
}

h1 {
    font-family: 'Fugaz One', cursive;
    font-weight: 400;
    color: #ff007fff;
    font-size: 4.5vw;
    position: relative;
    text-align: center;
    letter-spacing: 0.03em;
}

#about h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 22vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 17.5vw;
    height: 0.45vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

.blank1 {
    display: block;
    content: "";
    height: 1vw;
}

#about p {
    font-family: 'Kiwi Maru', serif;
    font-weight: 500;
    color: #646464ff;
    font-size: 1.7vw;
    text-align: center;
    line-height: 150%;
    margin: 1em;
}

.br-smp {
    display: none;
}

.blank2 {
    display: block;
    content: "";
    height: 4.5vw;
}

#examples h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 18vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 25.4vw;
    height: 0.45vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

.blank3 {
    display: block;
    content: "";
    height: 3.5vw;
}

.illust::before {
    /*これはダッシュを書くためのコード*/
    position: absolute;
    top: 50%;
    left: 24.7vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 2.5vw;
    height: 0.12vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;
}

.pink {
    font-family: 'Noto Sans JP', sans-serif;
    color: #ff007fff;
    font-weight: 300;
    font-size: 2.1vw;
    text-align: center;
    transform: scale(1, 0.85);
    position: relative;
}

.illust::after {
    /*これはダッシュを書くためのコード*/
    position: absolute;
    top: 50%;
    right: 24.7vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 2.5vw;
    height: 0.12vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;
}

.blank4 {
    display: block;
    content: "";
    height: 1.5vw;
}

.gray {
    font-family: 'Noto Sans JP', sans-serif;
    color: #646464ff;
    font-weight: 300;
    font-size: 2.1vw;
    text-align: left;
    transform: scale(1, 0.85);
    text-indent: 3em;
}

.two-img {
    width: 25vw;
}

#img001 {
    position: absolute;
    top: 72vw;
    left: 23.5vw;
}

#img002 {
    position: absolute;
    top: 72vw;
    right: 23.5vw;
}

.blank {
    display: block;
    content: "";
    height: 30vw;
}

#links h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 23vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 15.6vw;
    height: 0.45vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

#linkimg { /*「display: flex」を使用することをflexboxと言う*/
    /*flexboxの親要素を「コンテナ」子要素を「アイテム」と言う*/
    /*つまりこの要素はコンテナ*/
    display: flex;
    /*flex-direction: row;
      flex-wrap: nowrap; はいらないかも*/
    justify-content: space-around;
    padding: 3.125vw;  /*アイテム間の空白の幅*/
    margin: auto;  /*コンテナの外側(左右)の幅*/
}

#linkimg img { /*この要素はアイテム*/
    width: 15.625vw;
}

#linkimg img:hover {
    filter: drop0-shadow(0.5vw 0.5vw 0.5vw #c4c4c4ff);
}

.blank11 {
    display: block;
    content: "";
    height: 14.4vw;
}

#copyright p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #646464ff;
    font-size: 1.2vw;
    text-align: center;
}

.blank12 {
    display: block;
    content: "";
    height: 1vw;
}

/*以下トップへ戻るボタン*/

/*中略*/

/*以下スマホ版*/

@media screen and (max-width: 959px) {

body {
    width: auto;
    background-image: url("img/background_smp.png");
    background-size: 100%;
}

/*以下メニュー*/

/*中略*/

/*以下メイン*/

#main {
    width: 100%;
}

#header {
    display: none;
}

#header-smp {
    display: block;
    width: 100%;
}

.blank0 {
    display: block;
    content: "";
    height: 1vw;
}

h1 {
    font-family: 'Fugaz One', cursive;
    font-weight: 400;
    color: #ff007fff;
    font-size: 10vw;
    position: relative;
    text-align: center;
    letter-spacing: -0.01em;
}

#about h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 31vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 38vw;
    height: 0.95vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

.blank1 {
    display: block;
    content: "";
    height: 1.5vw;
}

#about p {
    font-family: 'Kiwi Maru', serif;
    font-weight: 500;
    color: #646464ff;
    font-size: 4vw;
    text-align: center;
    line-height: 150%;
    margin: 0.5em;
}

.br-smp {
    display: block;
}

.br-pc {
    display: none;
}

.blank2 {
    display: block;
    content: "";
    height: 7.5vw;
}

#examples h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 23vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 53vw;
    height: 0.95vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

.blank3 {
    display: block;
    content: "";
    height: 5.5vw;
}

.illust::before {
    /*これはダッシュを書くためのコード*/
    position: absolute;
    top: 50%;
    left: 39vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 4vw;
    height: 0.12vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;
}

.pink {
    font-family: 'Noto Sans JP', sans-serif;
    color: #ff007fff;
    font-weight: 300;
    font-size: 4vw;
    text-align: center;
    transform: scale(1, 0.85);
    position: relative;
}

.illust::after {
    /*これはダッシュを書くためのコード*/
    position: absolute;
    top: 50%;
    right: 39vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 4vw;
    height: 0.12vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;
}

.blank4 {
    display: block;
    content: "";
    height: 0.75vw;
}

.gray {
    font-family: 'Noto Sans JP', sans-serif;
    color: #646464ff;
    font-weight: 300;
    font-size: 4vw;
    text-align: left;
    transform: scale(1, 0.85);
    text-indent: 2em;
}

.two-img {
    width: 85vw;
}

#img001 {
    position: absolute;
    top: 149.5vw;
    left: 7.5vw;
}

#img002 {
    position: absolute;
    top: 237vw;
    left: 7.5vw;
}

.blank {
    display: block;
    content: "";
    height: 185vw;
}

#links h1::after { /*css3ではbeforeやafter(疑似要素という)の前のコロンは2つ*/
    /*これは角丸下線を引くためのコード*/
    position: absolute;  /*疑似要素の親にはrelative子にはabsoluteを指定しないといけない。理屈はわからない*/
    bottom: 0vw;
    left: 34vw;
    content: "";
    /*float: left; はいらないかもしれない*/
    width: 31vw;
    height: 0.95vw;
    border-radius: 100vw;  /*角を丸める。一定以上は丸くならない*/
    background-color: #ff007fff;  /*「-color」はなくても良いらしい*/
}

#linkimg { /*「display: flex」を使用することをflexboxと言う*/
    /*flexboxの親要素を「コンテナ」子要素を「アイテム」と言う*/
    /*つまりこの要素はコンテナ*/
    display: flex;
    /*flex-direction: row;
      flex-wrap: nowrap; はいらないかも*/
    justify-content: space-around;
    padding: auto;  /*アイテム間の空白の幅*/
    margin-left: 2.5vw;  /*コンテナの外側(左右)の幅*/
    margin-right: 2.5vw;
}

#linkimg img { /*この要素はアイテム*/
    width: 25vw;
}

#linkimg img:active {
    filter: drop-shadow(0.5vw 0.5vw 0.5vw #c4c4c4ff);
}

.blank11 {
    display: block;
    content: "";
    height: 6.5vw;
}

#copyright p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #646464ff;
    font-size: 1vw;
    text-align: center;
}

.blank12 {
    display: block;
    content: "";
    height: 1.5vw;
}

/*以下トップへ戻るボタンとハンバーガーメニュー*/

/*以下略*/

以上になります。
既にご回答を1件いただいておりますので、そちらも試してしてみたいと思います。

Comments

[maisumakun]

> どのコードが原因かわかりかねたため、また全てのコードを載せると長くなってしまうため

問題の再現する最低限のコードを作ってみましょう。

[nkfn_39]

ありがとうございます。
なるべく短いコードで同じ問題が発生するものを作成できるか試してしてみます。
iPhone本体を使用し確認しながらになるため、作成に少々時間がかかるかもしれません。
もしお手隙であれば作成できた際に再度ご確認いただけますと幸いです。

[Lhankor_Mhy]

iOSと言わず、普通にPC（Firefox）で閲覧しても文字と画像が重なっていました。
もしかすると、Chrome だけでしか正しいレイアウトにならないのかもしれません。

[退会済みユーザー]

htmlやcssで文法ミスをしていないか、ブラウザに依存する属性を使っていないか、Vendor Prefixで-webkit-と-moz-を使ってるかどうか、など。

[nkfn_39]

ご確認いただきありがとうございます。ご報告大変助かります。
私もFirefoxを入れて試してみたところ、iOSとは違う形で表示崩れが発生していました。
iPhone SE第2世代ではChromeでも表示崩れが起き、PCではEdgeでも問題なく表示されたので、「Chromeだけで想定の表示でき、SafariやFirefoxでは表示が崩れる」というわけでもないのかもしれません。
新たな問題が把握でき助かりました、誠にありがとうございます。

[Lhankor_Mhy]

iOS の Chrome は中身が Safari なんです。

[nkfn_39]

中身がSafariというのは存じ上げませんでした。
iPhoneも身内の端末でして、私はAndroid人間だったもので……
大変失礼いたしました、お教えいただき誠にありがとうございます。

Answer 1

br要素に高さを持たせるのは、標準的な方法ではない（Chromeでは動作する）ので、とりあえずの対処ならば別の要素を試してみてはどうでしょうか。

.blank5 {
	display: block;
	content: "";
	height: 175vw;
}

---

なお、画像を絶対配置（position: absolute）でレイアウトしていくのは、おすすめできないです。
位置の調整に苦労をするし、画像一枚増やすだけで、全体のレイアウト見直しじゃないですか？

ほんとにおすすめできないです。

通常のフロー（positionを指定しない）で記述することをおすすめします。

Comments

[nkfn_39]

ご回答いただき誠にありがとうございます。
brに高さを持たせるのはあまり良くない手法なのですね、大変勉強になりました。
別の要素で試し、結果がわかり次第何らかの形でご報告できればと思います。
お時間を割いていただき誠にありがとうございました。

[nkfn_39]

先ほどはご回答ありがとうございました。

空白行を作る要素をbrではなく空のdivにしたところ、iPhoneで見ても問題なく動作いたしました。
邪道なやり方かもしれませんが、個人的には直感的に空白行が作れたかと思いますので、この方法で作り直して見ようと思います。

また、画像の配置についてもご助言ありがとうございます。
一時的な使用の目的で作ったため、更新するつもりがなかったこともありこのような配置にしてしまったのですが、作り終えてみてから面倒だったなと痛感いたしました。そちらについても併せて改善してみようと思います。

この度はご回答誠にありがとうございました。
今後の学習に役立てたいと思います。

[Lhankor_Mhy]

ご解決されて何よりです