wordpressでテンプレートlightningを使用しています。

chromeのデベロッパーツールで表示を確認する際に、is_mobileでスマホ判定するとツール使用時はスマホと判定されてしまいます。
例：投稿を表示する場面

<?php // 新着コラム
$args = array(
	'post_type' => 'post',
  'posts_per_page' => 3,
  'category' => 165
);
$posts = get_posts($args); ?>
<section class="top-section column <?php if(is_mobile()){ echo 'spblock'; } ?>">
    <div class="container">
        <h2 class="fadein"><span class="en">Column</span><span class="ja">コラム</span></h2>
        <ul class="fadein <?php if(is_mobile()){ echo 'bn_slide'; } ?>">
            <?php foreach($posts as $post) : setup_postdata($post); ?>
            <li><a href="<?php the_permalink(); ?>">
                    <span class="image">
                        <?php if( has_post_thumbnail( get_the_ID() ) ) {
					$attr = array('class'	=> "media-object");
                    if(is_mobile()) {
                        the_post_thumbnail('full',$attr);
                    } else {
                        the_post_thumbnail('thumbnail',$attr);
                    }
				} else {
					echo '<img width="150" height="150" src="'.themeImagePath('thumb-no_image.png').'" class="media-object wp-post-image" alt="">';
				} ?>
                    </span>
                        <span class="body">
                            <p class="date"><?php the_time('Y年n月j日'); ?></p>
                            <p class="title"><?php the_title(); ?></p>
                        </span>
                </a></li>
            <?php endforeach; wp_reset_postdata(); ?>
        </ul>

        <div class="btn_wrap text-center fadein"><a class="btn btn-lg btn-primary" href="<?= esc_url( home_url('/column/') ); ?>">MORE</a></div>

    </div>
</section>

1200pxで確認してもif(is_mobile()){ echo 'spblock'; }でspblockが吐き出されます
iphone5で指定した時もspblockは出ます

pxを変更した時、iphone○からレスポンシブ1200pxに変更した時もキャッシュクリアをしています。

デベロッパーツールを閉じて普通の画面で確認するとis_mobileでスマホ判定されずに、きちんと表示できています。

このような状態になっている人がいない？
検索してもヒットせず、こちらに頼りたいです。

会社の人にも聞いていますが、他の方は平気なようで、、原因が分かりません。

下記で、使用情報を書いておきます。

functions.phpでis_mobileを定義していて下記コードを記述しています。

function is_mobile(){
  $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android *** Only mobile
    'Windows.*Phone', // *** Windows Phone
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate' // Other iPhone browser

  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

そのサイトに限らず起こります。

chrome バージョン: 91.0.4472.101（Official Build）（x86_64）
macOS

hiro_app

2021/06/17 10:40

例えばですが、こちらのような開発者ツール時にモバイルモードになっていたりしませんか？ https://www.atmarkit.co.jp/ait/articles/1403/20/news050.html

行動規範の内容に同意します

回答2件

ベストアンサー

再現手順

pxを変更した時、iphone○からレスポンシブ1200pxに変更した

以下の手順であれば私も再現してるかもです。

iPhoneを指定

レスポンシブ1200pxに変更

また、その後にdeviceモードをオフにしたらPC判定されました。
(デベロッパーツールを閉じたわけではないですが)

気になること

会社の人にも聞いていますが、他の方は平気なようで

聞いただけで、同じ操作ではないのではないですか？？

投稿2021/06/17 11:02

編集2021/06/17 11:05

runnynose

総合スコア497

runnynose さんが回答していらっしゃるように、一度ユーザーエージェントを選択すると横幅変更では変わらないようです。
下記サイトでユーザーエージェント文字列が確認できます。
https://testpage.jp/tool/ip_user_agent.php

バージョンが古い場合は再現せず、更新したら再現したので、社内の他の方はまだアップデートされていないからこの現象が起きていないのではないですかね。
サーバープログラム等でどうこうできる問題ではなさそうなので、毎度ユーザーエージェントを切り替えるほかないと思います。不具合ではなく、新しい仕様の可能性も高いですし。

投稿2021/06/17 11:31