[ 対応中 ] CDN使用時にヘッダーレイアウトのPC/モバイル判定がうまくいかない？

日頃よりご利用いただきありがとうございます。
ベクトルスタッフの松田と申します。

いただいたご連絡をもとに、いくつか確認を進めております。
大変お手数ですが、詳細確認のために「モバイル表示」とされている状態について、該当箇所のスクリーンショットをお送りいただくことは可能でしょうか。もし可能であれば、スクリーンショット時の画面サイズも併せていただければ幸いです。

また、もし「モバイル表示」＝「PC上にハンバーガーメニューが表示される状態」を指している場合、現時点での情報からは以下のような回答となります。
Lightningでは、PC表示時のbodyタグに誤ってdevice-pcではなくdevice-mobileクラスが付与された場合でも、画面が広い場合はモバイルナビゲーションが非表示になるようにしております。

`
@media (min-width: $lg-min) {
body.device-mobile .vk-mobile-nav-menu-btn {
display: none;
}
}
`

お手数をおかけしますが、ご確認のほど、どうぞよろしくお願いいたします。

詳しい内容をありがとうございます。
ご推察の通り、PHPによる判定が導入されております。ただし、JavaScriptによる判定もあり、通常なら、PHPによる判定が不一致でもそちらの方でdevice-pcもしくはdevice-mobileが付与される仕組みとなっております。
こちらの件につきまして社内で検討いたしますので、大変お手数ですが今しばらくお待ちいただけたら幸いです、
よろしくお願いいたします。

> Kさん

お世話になっております。ベクトルの石川でございます。
途中経過ですが、とりあえず未だ症状が再現できずにおります…。
さくらのウェブアクセラレータ以外に何かキャッシュ系のプラグインなど関連しそうなプラグインは利用されていますか？

> Kさん

CDNはさくらのコンテンツブーストは使ってなくてウェブアクセラレータの方だけ（まぁ普通にどちらか一つだけを使うものだと思いますが）を使ってる状態でしょうか？

> Kさん

お世話になっております。ベクトルの石川でございます。
大変おまたせしております。症状確認できました。
おそらくCSS最適化機能がモバイルの状態でキャッシュされる事が原因ではないかなと思いますので、

外観 > カスタマイズ 画面で
Lightning CSS 最適化 か VK Blocks CSS 最適化 で TreeShaking が有効になっていると思いますので、こちらを解除してみてください。

よろしくお願いいたします。

ありがとうございます。

モバイルとPCの切り替え（識別）用クラスはJSで切り替わっているのですが、
モバイルで読み込まれたタイミングで TreeShaking によってモバイルに関連するCSSだけが出力されたHTMLがキャッシュされてしまうことによって発生する現象ではないかと見受けられます。
TreeShaking自体はPHPで動いてるので、キャッシュに対する”改善”はできない（端末判定したあとで再読み込みとかするとなると、最初から普通に全部のCSSを読み込んだ方が早い…）ので、TreeShaking を停止すれば通常の全体のCSSを読み込むのでおそらく改善するのではないかなと思っている次第です。

おそらく…（汗

これで改善する事を祈っております…。