こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

wodrpressのモバイル版のPC版表示が違う

wodrpressでブログを作っていますが、iPhoneで表示を確認すると、PCと違うのです。
最近、見栄えを少し変更して、cssや画像などを少々入れ替えたのですが、アップした画像はきちんと表示していますが、cssが前のまま変更されていないのです。
パソコン上では思い通りの表示ですが、スマホで見ると画像は変わっていて、cssで変更した幅や色などが変わらず、崩れています。
ちなみに、スマホ版ではなくPC版での表示の場合です。
なぜなのでしょうか?
また、解決法を教えてください。

投稿日時 - 2014-04-04 19:30:35

QNo.8541571

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

以前私が作成した、Mediaqueryを説明するためのTemplateがあります。
参考サイトからDownloadしてご利用いただければ、その記述方法がわかると思いますが?・・・

参考URL:http://www.8341web.com/20120607/index.html

投稿日時 - 2014-04-06 22:00:31

@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%
}

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
このあたりが、おかしくありませんか?・・・
サイズ320px~568pxならばと、mediaqueryで指定している状態で、min-width 1000pxは、ないのでは?
320pxでしょう!・・・

MediaQueryの書き方を学びなおされてはいかがでしょうか?・・・

参考URL:http://matome.naver.jp/odai/2134467316884156701

投稿日時 - 2014-04-06 18:33:42

お礼

回答ありがとうございます。

@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]-->

も入れているのですが・・・。
まさか、今は対応していないとか、そんなことはないんですよね?

投稿日時 - 2014-04-06 20:42:37

CSSに間違いがあるのでは?・・・
テンプレートをつかっているのか?・・・自分で書いたCSSなのか?・・・
MediaQueryを、使っているのであれば、それにあった設定に変更する必要がある!

どのような設定になっているのかが、わからなければ、回答できない!

投稿日時 - 2014-04-05 21:06:38

お礼

回答ありがとうございます。
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の幅もなんか小さく左に寄っています。

不具合ばかりでつらいです。

解決方法があれば教えてただきたいです。

投稿日時 - 2014-04-06 18:02:46

あなたにオススメの質問