- 締切済み
wodrpressのモバイル版のPC版表示が違う
wodrpressでブログを作っていますが、iPhoneで表示を確認すると、PCと違うのです。 最近、見栄えを少し変更して、cssや画像などを少々入れ替えたのですが、アップした画像はきちんと表示していますが、cssが前のまま変更されていないのです。 パソコン上では思い通りの表示ですが、スマホで見ると画像は変わっていて、cssで変更した幅や色などが変わらず、崩れています。 ちなみに、スマホ版ではなくPC版での表示の場合です。 なぜなのでしょうか？ また、解決法を教えてください。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
CSSに間違いがあるのでは？・・・ テンプレートをつかっているのか？・・・自分で書いたCSSなのか？・・・ ＭediaQueryを、使っているのであれば、それにあった設定に変更する必要がある！ どのような設定になっているのかが、わからなければ、回答できない！
お礼
回答ありがとうございます。 wordpressのつづりがおかしくてすみません。 スマホサイト制作については無知です。 wptouchは入れていますが、pc版表示に切り替えるとおかしいです。 MediaQuery調べてみて、 @media only screen and (min-device-width: 320px) and (max-device-width: 568px) { body{ margin:0; padding:0; min-width:1000px; width:100% } #navbg{ background-size:100%; width:100%; min-width:1000px } nav{ width:100% } header img{ width:100% } #container{ width:95%; position: static } #content { float:none; width:auto } #sidebar{ float:none; width:auto } img{ max-width: 100%; height: auto; width: auto\9; /* ie8 */ } } などcssに入れて、iphone5sで見たら、 cssの色の設定などは変わってくれましたが、 なぜかnavbgのナビゲーションバーの右が切れていて、 floatの解除が利かず2カラムのままで、 containerの幅もなんか小さく左に寄っています。 不具合ばかりでつらいです。 解決方法があれば教えてただきたいです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
回答ありがとうございます。 @media only screen and (min-device-width: 320px) and (max-device-width: 568px) { body{ width:100%; } #navbg{ width:100%; min-width:320px } nav{ width:95%; } header { width:100% } #container{ width:95%; } #content { float:none; width:auto } #sidebar{ float:none; width:auto } img{ max-width: 100%; height: auto; width: auto\9; /* ie8 */ } } に修正しましたが、まだ治らずorz float:none; は効かないし、 marginを設定しても効かないし、 padding設定は数値なら効くのですが、 auto指定は効きません。 ちなみに、style.cssの中に書いているのですが、別ファイルにしなければいけないのでしょうか？ ですが一応上記で効くタグならスマホのみで反応します。 <head></head>の中には、 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> も入れているのですが・・・。 まさか、今は対応していないとか、そんなことはないんですよね？