PC表示の「ロゴとフレーズの文字サイズ調整」がスマホ用の設定が適用されてしまう

  • Y

    お世話になります。

    サイトヘッダーにサイトロゴ画像を貼っているのですが、画像のサイズを調整しようとするとPC用の設定が反映されず、スマホ用の設定が適用されてしまいます。
    環境としてはAmazonのLightsailを使い、CDNとしてCloudFrontを使用しており、以前スマホ表示の時にPC用のマークアップが適用されてしまっていたので今回もそれに似た原因なのかなと考えているのですが、詳しいところまではわからず質問させていただきました。(今回はPCのヘッダーにスマホのマークアップが適用されてしまっている?)

    恐れ入りますが何卒よろしくお願いいたします。

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : 5.3.2-ja
    ご利用のサーバー名 : Amazon Lightsail
    PHPのバージョン : 7.37
    OS : Ubuntu 16.04
    ご利用のブラウザ : Chrome
    該当サイトのURL : https://www.pagulikehimono.com/

    0 1 件の返信
  • administrators

    @yuji-nakazawa さん

    お世話になっております。
    りょうたです。

    is_mobile関数でUAの判定をしているはずですが、
    CloudFrontから送信されるときにAmazon CloudFrontに書き換えられるためうまくUA判定が効いていないだけだと思います！

    停止していただだくか、

    https://qiita.com/kooohei/items/4dcdb506745a6a1eef66

    https://support.amimoto-ami.com/en/articles/1361104-cloudfront-配下での-user-agent-の判定

    上記記事などを参考に独自にカスタマイズしていただけますと幸いでございます。
    お手数お掛け致しますが、宜しくお願い致します。

    0
  • Y

    お世話になります。

    ご返信ありがとうございました。
    既にfunctions.phpのis_mobile()のカスタマイズは行っており、以下の通りとなっております。

    <?php
//スマホのユーザーエージェント定義
function is_mobile(){
    if ($_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER']) {
    	return 1;
        exit();
    } else {
	return 0;
        exit();
    }
}

    ここで$_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER']というのがCloudFrontから送られてくる端末判別用のヘッダー情報で、PCとタブレットの時にfalse
    スマホの時にtrueとなります。
    実際にそうなることも確認しております。

    is_mobile関数以外になにか原因はありますでしょうか...
    今回症状をわかりやすくお伝えするためスクショも貼りました。

    0_1577257952227_全画面_2019_12_25_16_03.png
    1_1577257952229_全画面_2019_12_25_16_04.png
    2_1577257952230_全画面_2019_12_25_16_06.png

    お手数おかけしますが何卒よろしくお願いいたします。

    0
  • Y

    連投失礼します。

    functions.phpのis_mobile()を上記の通りカスタマイズしているのですが、できれば子テーマ側で上記のようにis_mobileをカスタマイズしたいのですがいい方法はございますでしょうか。
    jin-childの方にis_mobileというように同じ名前で関数を作ると案の定怒られてしまうので...
    もし何かアドバイスがございましたら何卒よろしくお願いいたしますm(_ _)m

    0
  • Y

    お世話になっております。

    本件のPC表示の「ロゴとフレーズの文字サイズ調整」がスマホ用の設定が適用されてしまう、について自己解決いたしました！
    functions.phpのis_mobile関数のカスタマイズにしようとしている$_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER']の値がmobileの時にtrue、それ以外の時にfalseというのが、どうやらbooleanでなく、文字列だったようで、PC表示のときにfalseとなっているのですが、if文的にはtrue判定となっていたのでis_mobileがtrue(1)となっていました。
    大変お騒がせしました！
    functions.phpのis_mobileをjin-childでカスタマイズする件については本件と別件ですので別でご質問させていただき、一旦解決済みとさせていただきます。

    //スマホのユーザーエージェント定義
function is_mobile(){
    if ($_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] == 'true') {
    	return 1;
        exit();
    } else {
	return 0;
        exit();
    }
}
    0