文字化け？急にスマホトップページだけレイアウト崩れ

Question

お世話になっております。楽天goldにてpcとスマホページを作成しておりますが、「NEW ARRIVAL」という見出しの新着商品部分がpcは問題ないのですがスマホの方はレイアウトや文字化け？みたないことになっており原因が分からずお調べ頂きたいです。レイアウト崩れのまま本ページに載せられないのでサンプル用にhttps://www.rakuten.ne.jp/gold/〇〇/sp/211207_index.htmlにてスマホのは確認頂きたいです。文字コードのせいかと思い、関連のあるhttps://www.rakuten.ne.jp/gold/〇〇/sp/new/css/swiper.min.csshttps://www.rakuten.ne.jp/gold/〇〇/sp/new/css/newitem.csshttps://www.rakuten.ne.jp/gold/〇〇/sp/new/js/swiper.min.jshttps://www.rakuten.ne.jp/gold/〇〇/sp/new/js/newitem.jsは全て「utf-8」にて保存してみましたが変化がございませんでした。こちら急ぎでしてご返答早いと助かります。

Answer

ECマスターズの田中です。JavaScriptにより作成されている仕組みは、エラーが発生すると以降の処理がすべて停止するため、まずは、ブラウザのデベロッパーツール、Consoleタブに表示される赤文字のエラーをできる限りなくすことが先決となります。https://murashun.jp/article/performance/chrome-devtools.htmlhttps://www.rakuten.ne.jp/gold/〇〇/sp/new/js/newitem.jsの先頭に記載されている@charset "UTF-8";は、CSSファイル向けの記述であり、JSファイルに記載するとエラーが発生し、その後の一切の処理が動作しなくなりますので、まずは、この1行を削除していただきますようお願いします。

Answer

お世話になっております。ご指摘箇所やその他修正をして文字化けやレイアウト崩れはなくなりましたが、スマホの端末で日付タブをタップして商品を縦にみていく過程でなぞの更新？処理のようなことが勝手に起きてまれにhttps://www.rakuten.ne.jp/gold/〇〇/sp/211208_index.html# で問題が繰り返し起きました。というメッセージがでてしまいます。原因分かりますでしょうか？確認URLはhttps://www.rakuten.ne.jp/gold/〇〇/sp/211208_index.htmlです。宜しくお願い致します（o_ _)ｏ））

Answer

スタッフにて他の端末二台ほどで確認すると上記のようなエラーはでないみたいなので、マスターズさんの方でも特に問題なく閲覧できるようであれば、ユーザーにも影響なさそ………（省略）………

Answer

ECマスターズの田中です。私のiPhone 11上のSafariでは、表示に問題ございませんでした。また、Mac上のChrome共々、「問題が繰り返し起きました」の表示は見当たりませんでした。なお、Mac上のChromeで開こうとすると、CPUに大きな負荷がかかっておりますので、ページ内で動作しているJavaScriptの仕組みが正しく動いているかどうか、いくつか仕組みを外すと負荷がどうなるか、など、Chrome上のタスクマネージャを利用して見直していただければ幸いです。

文字化け？急にスマホトップページだけレイアウト崩れ

カテゴリーから探す