[ 対応中 ] CDN使用時にヘッダーレイアウトのPC/モバイル判定がうまくいかない？
[ 対応中 ] CDN使用時にヘッダーレイアウトのPC/モバイル判定がうまくいかない？
- このトピックには8件の返信、3人の参加者があり、最後に
により1日、 17時間前に更新されました。
-
投稿
-
■ 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が付与される仕組みとなっております。
こちらの件につきまして社内で検討いたしますので、大変お手数ですが今しばらくお待ちいただけたら幸いです、
よろしくお願いいたします。
- このトピックに返信するにはログインが必要です。
