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

解決済 kedama
(@kedama)

9年前

お世話になります。
似たような現象が無いか探してみたのですが上手く見つける事が出来なかったので質問させてください。

現在自作テーマでブログを作っていますが、レスポンシブデザインの切り替えが意図した動きをしてくれません。

header部分に下記を記載。
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css”>

cssではこの様な書き方で切り替えを指定しています。
@media only screen and (min-width: 481px) {}

PCとスマホ（iPhone5s）で確認すると、マホでは問題ない様に見えるのですがPCでは横幅が481pxになる前に表示が切り替わってしまいます。
自作テーマだけでなく、他のテンプレデザインも試してみましたが指定されているサイズよりも小さい値で切り替わってしまいました。

サーバー：ロリポップ（ロリポプラン）
WPバージョン：4.1.1
確認端末：Windows7(chrome)、iPhone5s

ご指摘宜しくお願いいたします。

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

x743
(@x743)

9年前

http://www.w3.org/TR/css3-mediaqueries/#width

メディアクエリのwidthはスクロールバーを含めたサイズなので、スクロールバーがあるコンテンツの場合、min-width/max_widthなどで切り替わった際のコンテンツ幅はスクロールバーのサイズ分小さい状態になります。

横幅が481pxになる前に表示が切り替わってしまいます。

とありますが、どの横幅と比較したのでしょうか。
例えば、jQueryで$(window).width()などとすると、スクロールバーを含まない値が返ってきます。

Chromeでしたら、要素の検証を開いている状態でウィンドウのサイズを変更すると右上辺りにスクロールバーを含むサイズが少しの間表示されますし、デバイス切り替えモード？であればスクロールバーを気にせずテストが出来るかと思います。

トピック投稿者 kedama
(@kedama)

9年前

x743さん、ありがとうございます。
ご指摘のありましたスクロールバー分のサイズですが、スクロールバーを含めた状態で確認しています。
ｊQueryは使用しておらず、CSSに記述したメディアクエリだけで切り替えをしようとしています。

現在は481px、736px、960pxで切り替えようとしていますが、433Px、663px、864pxでそれぞれ変わってしまう状態です。
ローカルで同じようにChromeの要素検証で確認した時は設定通りに動いていましたので、もう一度ローカルで動作確認をしてみようと思います。
貴重な回答ありがとうございました。

x743
(@x743)

9年前

各々のサイズの関係をみると、同じ理由でズレが起きているようですね…ブラウザの表示が90%に縮小されているとか、そんな感じがします。

Chromeのデバイスモードでは左上の禁止マークの下にある『* media queries found』ボタンをクリックするとルーラーにメディアクエリの切り替え位置が表示されますので、参考になるかもしれません。

トピック投稿者 kedama
(@kedama)

9年前

x743さん
ご指摘を受けて一度ブラウザの表示を確認してみたところ、確かに縮小がかかっていました！
気付かない間に縮小90％にしてしまっていたようです。
100％表示に直した所、問題なく表示を確認する事が出来ました！！

ここまでお付き合い頂き、本当にありがとうございます。
また、デバイスモードのルーラーにメディアクエリの切り替え位置が表示できる事も教えて頂きありがとうございました！この機能は初めて使いましたが、とても便利ですね！
これからこの機能もあわせて更に勉強していこうと思います。

この度は誠にありがとうございます。大変お世話になりました。

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

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

トピックタグ

表示