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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Q&A

1回答

1506閲覧

Web制作(Webサイト)のモバイルエラー

rays

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

0グッド

1クリップ

投稿2020/05/31 17:13

編集2022/01/12 10:55

前提・実現したいこと

HTML/PHP/JS/CSSで以下のWebサイトを制作しています。
https://rays-s.com
実現したいこととしては、モバイルでエラーなく表示することです。

発生している問題・エラーメッセージ

Iphone8のような少し前のデバイスで閲覧した際に、
「問題が繰り返し起きました」
といった内容が表示され、ページを読み込むことができません。
Iphone11やIphone10Rであれば閲覧可能です。

【2020/6/2追記】
JSをすべてコメントアウトしても同様のエラーが発生
キャッシュのクリア等は対応済
TOPに複数配置している画像をコメントアウトするとなおりました。
TOPの配置をそのままで、再読み込みエラーが発生しないようにしたいです。

該当のソースコード

【2020/6/2追記】
■TOPイメージはこの記述で120まで作成

<div class="top-animation"><img class="top-img-1" src="IMG/TOP_1.JPG" alt="資料作成例1"></div> ■CSS 画像ごとにこんなものを指定 .top-img-25{ width:40%; max-width:150px; position:relative; bottom:1800px; left:350px; }

モバイルでは不要の画像にはこんなものを指定
.top-img-24{
display:none;
}
■CSS アニメーションにはこんなものを指定
.top{
margin: 0 auto;
width:100%;
height: 100vh;
position: relative;
z-index: 1;
background-color: #F2F2F2;
overflow: hidden;
}

.top-animation{ width:100%; left:0px; bottom:0px; position: absolute; -webkit-animation: Loop 60s linear infinite; -ms-animation: Loop 60s linear infinite; animation: Loop 60s linear infinite; } @keyframes Loop { 0% { transform:translate(-100%,100vh); -webkit-transform:translate(-100%,100vh); -ms-transform:translate(-100%,100vh); } to { transform:translate(100%,-100vh); -webkit-transform:translate(100%,-100vh); -ms-transform:translate(100%,-100vh); } } @-webkit-keyframes Loop { 0% { transform:translate(-100%,100vh); -webkit-transform:translate(-100%,100vh); -ms-transform:translate(-100%,100vh); } to { transform:translate(100%,-100vh); -webkit-transform:translate(100%,-100vh); -ms-transform:translate(100%,-100vh); } } @-ms-keyframes Loop { 0% { transform:translate(-100%,100vh); -webkit-transform:translate(-100%,100vh); -ms-transform:translate(-100%,100vh); } to { transform:translate(100%,-100vh); -webkit-transform:translate(100%,-100vh); -ms-transform:translate(100%,-100vh); } }

試したこと

画像サイズの圧縮等は対応済です。
全体としては、約7MBほどです。
(Google FontやGA込み)
対策を調べましたが、わからず、ご教示いただけますと幸いです。
JSコメントアウト済 ⇒ 治らず
キャッシュ履歴 ⇒治らず
TOP画像を全部コメントアウト ⇒治った

補足情報(FW/ツールのバージョンなど)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/05/31 21:05

提示されているのはソースコードではありません。どのように組まれているのでしょうか。 サーバーサイドの問題であればWebサイトを直接みなければならないケースは多くはないです(宣伝だと捉えられます)
rays

2020/05/31 21:37 編集

ソースコードとおっしゃっているのは、html全てを貼るとゆうことでしょうか?何のコードが影響を与えているかさえわからないため、こちらで確認をさせていただいております。(必要であればhtmlとcssを貼り付けます。) ソースコードはwebサイト上で確認出来るかと存じますので、お手数ですがお力添えいただけますと幸いです。。。(ここにサイトを貼って宣伝したところで大した効果は得られないと思いますので、そういった目的ではありません。)
rays

2020/05/31 21:35 編集

強いてゆうならば、TOP画像を読み込む際に落ちるため、おそらくトップの仕様が悪いのかと予想しています。 複数の画像が左下から右上に流れるようなコーディングをしており、cssのanimation、translate等を使用しております。TOPの画面外右上から画面外左下まで画像を配置の上、TOPのdivをマイナスから流すようにコーディングしています。(当方、素人でして、おそらくもっといい実装方法があるとは思いますが、無理くりやっているような状況です。)
rays

2020/05/31 21:36 編集

素人すぎて説明が分かりにくいかもしれません。先程いただいたような指摘を是非いただけますと幸いです。 これまでのことは大抵調べれば何となかったのですが、いかんせん、情報が落ちておらず。。。 何卒よろしくお願いいたします。
AkitoshiManabe

2020/05/31 22:00

> 何のコードが影響を与えているかさえわからない 正直に申しますと、アウトソージング系サイトで仕事を依頼されるのが相応しい状況と思います。ご自身で管理・運営しているのであれば、少なからずエンジニアとしての知識を有しているはずで、質問内容には使用ライブラリやプラグインなどを列挙、自分なりに試したことを記述できるはずです。 > お力添え バージョンの異なる2つのjQueryを読んでいるのは不自然です。そこから探ってみてください。 プラグインはコアのバージョンに依存する可能性があります。
m.ts10806

2020/05/31 23:40

ガイドラインにあるように、現象が再現できる最小構成のコードを組んでみると良いのではと。 さすがに「全部みて全部探して」では質問になってません。しかも8というと既に販売終了しているモデルなので、再現困難では? 少なくとも、マルチデバイス対応を日々しているような開発会社でないと、全て確認しきるのは無理があります。
hentaiman

2020/06/01 00:40

ちょーどiphone8あるので試しに開いたら確かにエラーが笑 端末持ちの人なら頑張れば原因究明出来るかもしれませんな
rays

2020/06/01 15:14

ソースコードを追加してみました。。。 記載しましたが、TOP画像が悪さしているみたいです。。。 お手数ですが、お力添えいただけますと幸いです。。 よろしくお願いいたします。
rays

2020/06/01 15:17

モバイルのデバイスごとで影響が出る前例がWeb上に全く落ちておらず、 参考になりそうなURL等あればそちらをご教示いただくだけでも構いませんので、よろしくお願いいたします。
hentaiman

2020/06/01 20:21

そうなった事ないんで参考サイトも何も分かりませんが、デフォルトブラウザ以外のブラウザ入れれば端末依存かブラウザ依存かぐらい分かりますよ、という程度の調査手順のアドバイスぐらいしか言えませんな
m.ts10806

2020/06/01 20:25

コードはマークダウンのcode機能を利用してご提示ください。 どういうことかはヘルプページや他の質問や回答を参考にしてください。
guest

回答1

0

「ページのソースを表示」でソースコードを見てみました。

,user-scalable=yesの位置が、""の外に出てしまっているので、直してみてもいいかもしれません。

HTML

1<!-- 「,user-scalable=yes」が""の外に出てしまっている --> 2<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0",user-scalable=yes><!-- レスポンシブ対応用 -->

HTML

1<!-- 「,user-scalable=yes」を""の内に含める --> 2<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes"><!-- レスポンシブ対応用 -->

投稿2020/06/01 06:34

編集2020/06/01 06:36
new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rays

2020/06/01 15:07

対応しましたが、ダメでした。。。 ありがとうございます。
m.ts10806

2020/06/01 20:26

「ダメでした」「うまくいかない」では伝わることは何もないですよ。 結果を確実にフィードバックしてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問