[ 解決済 ] CDN使用時にヘッダーレイアウトのPC/モバイル判定がうまくいかない？
[ 解決済 ] CDN使用時にヘッダーレイアウトのPC/モバイル判定がうまくいかない？
- このトピックには17件の返信、3人の参加者があり、最後に
により1ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.6.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.27.1■ Pro Unit のバージョン
0.28.0■ スキンの種類
Origin III■ 期待する動作
CDN使用時でもレスポンシブの判定・レイアウト表示が正常にされてほしい■ 自分で試した事
本フォーラムで、キャッシュ系のプラグインが有効の場合にモバイル表示になり、無効にすると改善されることがあるというスレッドを確認済また、過去（2020年）のアップデートでCDNでの動作改善がなされた旨のスレッドも確認済
■ 症状が発生するブラウザ
問わず■ 実際の症状
サイト高速化のため、さくらインターネットのCDN「ウェブアクセラレータ」を導入したサイトで、ヘッダーメニューがモバイル表示になるという現象が発生するという報告を受けています。
スマホ表示になるタイミングやページに一貫性はなく、EdgeでもChromeでも発生するとのことです。
ただ、私自身は現状、その状況に遭遇できておらず再現ができていない状態です。おそらくモバイルビューでキャッシュされているのだとは思うのですが、レイアウト切り替えがCSS+JavaScriptで実装されているのであれば、ブラウザ処理なのでキャッシュは影響しないはずです。
こういった事が起こるということは、ヘッダーのモバイルビューの切り替え処理にサーバーサイドの処理が入っていることだと思うのですが、現行のバージョンのテーマではPHPでヘッダー切り替えを実装している箇所がありますか？さくらのレンタルサーバでもCDNが標準で使えるようになり、CDNを導入するケースが増えているのですが、似たようなケースが頻発するとLightningをおすすめしづらくなってしまうので、なんとか回避する方法を探っています。なにか情報があれば教えてください。
■ その他特記事項
サイトオーナー様もライセンスを購入いただいていますので、特殊ケースであればプライベートサポートをご案内します続報です。
body_class で device-pc/device-moblie というclass出力があり、”vk-blocks-build-css-inline-css” の出力内容がそれに依存したCSSになっているのが影響してるっぽいですね。とりあえずの対応として、子テーマか追加CSSから、device-pc/device-moblie に依存しない形のCSSを書いて上書きさせることでなんとかなりそうな気がしてきました。
しかし、正直しんどい作業なので、テーマ側で改善していただけたらなぁと感じております。。。ご検討いただけたら幸いです。。。日頃よりご利用いただきありがとうございます。
ベクトルスタッフの松田と申します。いただいたご連絡をもとに、いくつか確認を進めております。
大変お手数ですが、詳細確認のために「モバイル表示」とされている状態について、該当箇所のスクリーンショットをお送りいただくことは可能でしょうか。もし可能であれば、スクリーンショット時の画面サイズも併せていただければ幸いです。また、もし「モバイル表示」＝「PC上にハンバーガーメニューが表示される状態」を指している場合、現時点での情報からは以下のような回答となります。
Lightningでは、PC表示時のbodyタグに誤ってdevice-pcではなくdevice-mobileクラスが付与された場合でも、画面が広い場合はモバイルナビゲーションが非表示になるようにしております。`
@media (min-width: $lg-min) {
body.device-mobile .vk-mobile-nav-menu-btn {
display: none;
}
}
`お手数をおかけしますが、ご確認のほど、どうぞよろしくお願いいたします。
松田さま、返信ありがとうございます。
サイトオーナーよりURLの開示の許可をいただきましたので共有します。
こちらのサイトです。CDNキャッシュの有無で再現性が変わるのですが、PCビューで2パターンのレイアウト崩れが見つかっております。
（１）モバイル用のドロワーメニューボタンが表示され、グローバルナビの高さ算出がおかしい＋下層項目がある場合に下矢印が出ている
キャプチャ画像：https://capture.dropbox.com/qdoyhOpSqURSJoB6
→body_class は devide-pc になっていました。ただ、HTMLソースを確認したところ、head内にインラインで出力されるCSSの一部が出力されていないようでした。（２）レイアウトはおおよそ正しいが、下層項目がある場合にモバイル用の開閉ボタンが表示されている
キャプチャ画像：https://capture.dropbox.com/Nws6AJIioaIiIucy
→body_class は devide-mobile になっていました。この場合は、モバイル用の開閉ボタンを非表示にするインラインCSSがソースに出力されていないようでした。どちらも、出力CSSが足りないことが原因となっていそうな感じでした。よろしくお願いいたします。
松田さま
返信ありがとうございます。実は先程結構頑張ってお返事を投稿したのですが、キャプチャ画像を外部リンクにしたのがスパム判定されてしまったのか、表示されてなくなってしまいました。。。お手数ですがフォーラム管理者の権限でスパム解除をお願いできないでしょうか。
キャプチャ画像は別途添付いたします。
> K さん
ありがとうございます！ (￣人￣)
詳しい内容をありがとうございます。
ご推察の通り、PHPによる判定が導入されております。ただし、JavaScriptによる判定もあり、通常なら、PHPによる判定が不一致でもそちらの方でdevice-pcもしくはdevice-mobileが付与される仕組みとなっております。
こちらの件につきまして社内で検討いたしますので、大変お手数ですが今しばらくお待ちいただけたら幸いです、
よろしくお願いいたします。> Kさん
お世話になっております。ベクトルの石川でございます。
途中経過ですが、とりあえず未だ症状が再現できずにおります…。
さくらのウェブアクセラレータ以外に何かキャッシュ系のプラグインなど関連しそうなプラグインは利用されていますか？石川さん
お手数おかけしております。
キャッシュに関連しそうなプラグインは導入しておらずアクセラレータのみです。
どこかのページにスマートフォンでアクセス→何度かリロードしてキャッシュ生成→PCからアクセス、で再現できるかもしれません。
ただサービス仕様としてCDNの配信元サーバが複数あるので、同じページを同時に別端末で見ても、キャッシュの状態が異なるということがありえます。
なおキャッシュの有効期限はおそらく1日です。キャッシュの状態はブラウザDevツール＞ネットワーク＞レスポンスヘッダ で確認できます。
https://manual.sakura.ad.jp/cloud/webaccel/manual/troubleshooting.htmlよろしくお願いいたします。
> Kさん
CDNはさくらのコンテンツブーストは使ってなくてウェブアクセラレータの方だけ（まぁ普通にどちらか一つだけを使うものだと思いますが）を使ってる状態でしょうか？
> Kさん
お世話になっております。ベクトルの石川でございます。
大変おまたせしております。症状確認できました。
おそらくCSS最適化機能がモバイルの状態でキャッシュされる事が原因ではないかなと思いますので、外観 > カスタマイズ 画面で
Lightning CSS 最適化 か VK Blocks CSS 最適化 で TreeShaking が有効になっていると思いますので、こちらを解除してみてください。よろしくお願いいたします。
石川さん、調査ありがとうございます！
「Lightning CSS 最適化」にてTree Shakingが有効になっていましたので「何もしない」に変更しました。その後ブラウザのキャッシュを削除しサイトを巡回したところ、まだ症状があるようですが、設定変更から24時間（ウェブアクセラレーターのキャッシュ保持時間）以上経過してから改めて確認する予定です。
またご報告いたします。ありがとうございます。
モバイルとPCの切り替え（識別）用クラスはJSで切り替わっているのですが、
モバイルで読み込まれたタイミングで TreeShaking によってモバイルに関連するCSSだけが出力されたHTMLがキャッシュされてしまうことによって発生する現象ではないかと見受けられます。
TreeShaking自体はPHPで動いてるので、キャッシュに対する”改善”はできない（端末判定したあとで再読み込みとかするとなると、最初から普通に全部のCSSを読み込んだ方が早い…）ので、TreeShaking を停止すれば通常の全体のCSSを読み込むのでおそらく改善するのではないかなと思っている次第です。おそらく…（汗
これで改善する事を祈っております…。
- このトピックに返信するにはログインが必要です。
