質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

nkfn_39
nkfn_39

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0リアクション

1クリップ

383閲覧

投稿2022/08/03 05:58

編集2022/08/03 08:27

自作サイトをロリポップサーバーで公開したのですが、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のメインコンテンツの部分のコードを抜粋して貼ります。長くなってしまい申し訳ございません。

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件いただいておりますので、そちらも試してしてみたいと思います。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

maisumakun

2022/08/03 06:20

> どのコードが原因かわかりかねたため、また全てのコードを載せると長くなってしまうため 問題の再現する最低限のコードを作ってみましょう。
nkfn_39

2022/08/03 06:36

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

2022/08/03 06:50

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

退会済みユーザー

2022/08/03 06:57

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

2022/08/03 06:58

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

2022/08/03 07:01

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

2022/08/03 07:03

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。