Title: レスポンシブデザインで指定した値より小さい横幅で切り替わってしまう
Last modified: 2016年7月30日

---

# レスポンシブデザインで指定した値より小さい横幅で切り替わってしまう

 *  解決済 [kedama](https://ja.wordpress.org/support/users/kedama/)
 * (@kedama)
 * [11年、 6ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%81%ae%e5%88%87%e3%82%8a%e6%9b%bf%e3%81%88%e3%81%8c%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e6%a8%aa%e5%b9%85%e3%82%88%e3%82%8a%e5%b0%8f%e3%81%95/)
 * お世話になります。
    似たような現象が無いか探してみたのですが上手く見つける事が
   出来なかったので質問させてください。
 * 現在自作テーマでブログを作っていますが、レスポンシブデザインの切り替えが意図した
   動きをしてくれません。
 * header部分に下記を記載。
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’);?
   >” type=”text/css”>
 * cssではこの様な書き方で切り替えを指定しています。
    [@media](https://ja.wordpress.org/support/users/media/)
   only screen and (min-width: 481px) {}
 * PCとスマホ（iPhone5s）で確認すると、マホでは問題ない様に見えるのですがPCでは横
   幅が481pxになる前に表示が切り替わってしまいます。
    自作テーマだけでなく、他の
   テンプレデザインも試してみましたが指定されているサイズよりも小さい値で切り替わ
   ってしまいました。
 * サーバー：ロリポップ（ロリポプラン）
    WPバージョン：4.1.1 確認端末：Windows7(
   chrome)、iPhone5s
 * ご指摘宜しくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)

 *  [x743](https://ja.wordpress.org/support/users/x743/)
 * (@x743)
 * [11年、 6ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%81%ae%e5%88%87%e3%82%8a%e6%9b%bf%e3%81%88%e3%81%8c%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e6%a8%aa%e5%b9%85%e3%82%88%e3%82%8a%e5%b0%8f%e3%81%95/#post-204340)
 * [http://www.w3.org/TR/css3-mediaqueries/#width](http://www.w3.org/TR/css3-mediaqueries/#width)
 * メディアクエリのwidthはスクロールバーを含めたサイズなので、スクロールバーがある
   コンテンツの場合、min-width/max_widthなどで切り替わった際のコンテンツ幅はスクロール
   バーのサイズ分小さい状態になります。
 * > 横幅が481pxになる前に表示が切り替わってしまいます。
 * とありますが、どの横幅と比較したのでしょうか。
    例えば、jQueryで$(window).width()
   などとすると、スクロールバーを含まない値が返ってきます。
 * Chromeでしたら、要素の検証を開いている状態でウィンドウのサイズを変更すると右上
   辺りにスクロールバーを含むサイズが少しの間表示されますし、デバイス切り替えモード？
   であればスクロールバーを気にせずテストが出来るかと思います。
 *  トピック投稿者 [kedama](https://ja.wordpress.org/support/users/kedama/)
 * (@kedama)
 * [11年、 6ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%81%ae%e5%88%87%e3%82%8a%e6%9b%bf%e3%81%88%e3%81%8c%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e6%a8%aa%e5%b9%85%e3%82%88%e3%82%8a%e5%b0%8f%e3%81%95/#post-204345)
 * x743さん、ありがとうございます。
    ご指摘のありましたスクロールバー分のサイズですが、
   スクロールバーを含めた状態で確認しています。 ｊQueryは使用しておらず、CSSに記述
   したメディアクエリだけで切り替えをしようとしています。
 * 現在は481px、736px、960pxで切り替えようとしていますが、433Px、663px、864pxでそれぞれ
   変わってしまう状態です。
    ローカルで同じようにChromeの要素検証で確認した時は設定
   通りに動いていましたので、もう一度ローカルで動作確認をしてみようと思います。 
   貴重な回答ありがとうございました。
 *  [x743](https://ja.wordpress.org/support/users/x743/)
 * (@x743)
 * [11年、 6ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%81%ae%e5%88%87%e3%82%8a%e6%9b%bf%e3%81%88%e3%81%8c%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e6%a8%aa%e5%b9%85%e3%82%88%e3%82%8a%e5%b0%8f%e3%81%95/#post-204365)
 * 各々のサイズの関係をみると、同じ理由でズレが起きているようですね…ブラウザの表示
   が90%に縮小されているとか、そんな感じがします。
 * Chromeのデバイスモードでは左上の禁止マークの下にある『* media queries found』
   ボタンをクリックするとルーラーにメディアクエリの切り替え位置が表示されますので、
   参考になるかもしれません。
 *  トピック投稿者 [kedama](https://ja.wordpress.org/support/users/kedama/)
 * (@kedama)
 * [11年、 6ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%81%ae%e5%88%87%e3%82%8a%e6%9b%bf%e3%81%88%e3%81%8c%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e6%a8%aa%e5%b9%85%e3%82%88%e3%82%8a%e5%b0%8f%e3%81%95/#post-204367)
 * x743さん
    ご指摘を受けて一度ブラウザの表示を確認してみたところ、確かに縮小がか
   かっていました！ 気付かない間に縮小90％にしてしまっていたようです。 100％表示
   に直した所、問題なく表示を確認する事が出来ました！！
 * ここまでお付き合い頂き、本当にありがとうございます。
    また、デバイスモードのルーラー
   にメディアクエリの切り替え位置が表示できる事も教えて頂きありがとうございました！
   この機能は初めて使いましたが、とても便利ですね！ これからこの機能もあわせて更に
   勉強していこうと思います。
 * この度は誠にありがとうございます。大変お世話になりました。

4件の返信を表示中 - 1 - 4件目 (全4件中)

 トピック「レスポンシブデザインで指定した値より小さい横幅で切り替わってしまう」に
は新たに返信することはできません。

## タグ

 * [メディアクエリ](https://ja.wordpress.org/support/topic-tag/%e3%83%a1%e3%83%87%e3%82%a3%e3%82%a2%e3%82%af%e3%82%a8%e3%83%aa/)
 * [レスポンシブデザイン](https://ja.wordpress.org/support/topic-tag/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/)
 * [自作テーマ](https://ja.wordpress.org/support/topic-tag/%e8%87%aa%e4%bd%9c%e3%83%86%e3%83%bc%e3%83%9e/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4件の返信
 * 2人の参加者
 * 最後の返信者: [kedama](https://ja.wordpress.org/support/users/kedama/)
 * 最後の活動: [11年、 6ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%81%ae%e5%88%87%e3%82%8a%e6%9b%bf%e3%81%88%e3%81%8c%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e6%a8%aa%e5%b9%85%e3%82%88%e3%82%8a%e5%b0%8f%e3%81%95/#post-204367)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック