WordPressで使用するレスポンシブ対応のテーマは、一般的に以下のようにデザインコード（CSS）の構成をしています。

1. パソコン（幅広ウインドウ）用のCSSを主とし、メディアクエリを使ってモバイル（幅狭ウインドウ）用のコードを追記して上書き
2. モバイル用のCSSを主とし、メディアクエリを使ってパソコン用のコードを追記して上書き
3. モバイル用・パソコン用それぞれのテンプレート構造とし、それぞれに対するCSSを割り当て

1および2の方法では、特にパソコンのマルチウインドウで幅や高さを変更するシーンにおいてはスムーズに調整が行われるメリットはあるものの、基礎とするCSSへいろいろな条件を加えていくため、記述が非常に多くなるというデメリットもあります。

3の方法では、主にユーザーエージェント（閲覧する側の環境）によってテンプレートもCSSも切替を行うため、双方に適したものだけが読み込まれることで効率よくページを生成できるメリットはあるものの、ユーザーエージェントが同一で画面幅だけが変わるマルチウインドウ環境では適用できず、また、テンプレートを分けることからテーマ内の構造も複雑になるというデメリットがあります。

そこで【HABONE】および【HABONE BASE】テーマでは、双方のメリット・デメリットを理解した上で、以下のような構成にしています。

1. パソコン用・モバイル用ともテンプレートは共通
2. ユーザーエージェントによって、パソコン専用・モバイル専用のCSSのみを読み込む
3. ユーザーエージェントによって、パソコン・モバイル双方で必要なスクリプトのみを読み込む

これにより、不要なコードを読み込まなくなることで、効率よくページの生成ができるため、高速表示ができるようにしておりますが、前述したマルチウインドウ時のデメリットはそのまま残る形となっています。

従って、パソコンでアクセスした際にマルチウインドウで画面幅や高さを縮小していった場合には、画面の表示が崩れることがありますが、そうした仕様ですので、ご了承の上使用ください。

また、子テーマについても同様の仕様にはなっておりますが、ひとまず適用してから、パソコン用・モバイル用に分けて使うことがカスタマイズ時には多いと考え、以下のような読み込み順としております。

1. 子テーマのstyle.cssを読み込む
2. 子テーマのpc-style.css（パソコン用）またはmobile-style.css（モバイル用）を読み込む

なお、ユーザーエージェントの切り替えについては、WordPress標準の「wp_is_mobile」関数ではなく、独自に追加した「is_mobile」関数を使用しております。

カスタマイズ等でユーザーエージェントによる切り分けをされる際には、「is_mobile」関数を使用いただきますようお願いいたします（ 「wp_is_mobile」関数 も問題なく使用できますが、統一されることをお勧めします）。

「is_mobile」関数についてはモバイルを判定するための関数についてを参照ください。