wordpress+wptouchのCSSについて教えてください。スマホページでiframeがどうしても画面からはみ出てしまいます。

以下のサイトを参考に作成しましたが、全く反応しません。
http://ambergris.hateblo.jp/entry/2012/09/25/112656
動画のプレーヤーをiframeで呼び出しているのですが、PCページと同じサイズになっているようです。
wptouch内ヘッダー内に以下の記述。
<script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) {
document.write('<link rel="stylesheet" href="style.css">');
}else if(_UA.indexOf('Android') > -1){
document.write('<link rel="stylesheet" href="style.css">');
}else{
document.write('<link rel="stylesheet" href="style.css">');
}
})();
</script>

wptouch内style.cssに以下の記述を追記

}/* iframe枠の調整 */
#box {
overflow: auto;
width: 300px;
height: 200px;
}
#box iframe {
width: 295px; /*PC版の幅-5pxくらい*/
height: 200px;
}

ちなみにwordpressの投稿、記事欄に以下の記述で呼び出してます。
<div id="box">
<iframe class="gopano-player" type="text/html" width="480" height="360" src="http://www.gopano.com/embed/***" frameborder="0"> </iframe></div>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/01/20 18:07:31
  • 終了:2013/01/27 18:10:03

回答(2件)

id:pretaroe No.1

pretaroe回答回数531ベストアンサー獲得回数752013/01/20 19:37:50

ポイント50pt

>wptouch内ヘッダー内に以下の記述。

この記述は必要ありません。
スタイルシートを機種によって読み分けるロジックですが
wptouchを使用してるので関係ないわけです。



>wptouch内style.cssに以下の記述を追記
原因を切り分けるために、

<style>
#box {
overflow: auto;
width: 300px;
height: 200px;
}
#box iframe {
width: 295px; /*PC版の幅-5pxくらい*/
height: 200px;
}
</style>

これを記事の上の方に直接書いて、大きさが変更されるか確認してください。
これで大きさが変更されれば、STYLEが上手く読まれていないことが原因です。


■これで大きさが変わらない場合

src="http://www.gopano.com/embed/***"
の部分を
src="http://www.yahoo.co.jp/"
に変更して確認してください。

これで大きさが変わる場合は、
動画?のifarem表示だからだと思います。

FLASHで実現している場合などは、IFRAME枠を超えてもはみ出て表示されると思います。
もしくは、iframeのところで指定した大きさで動画の大きさを規定されるようになっていて、後からCSSで上書きしても無意味なのかもしれません。

■次善策
<div id="pc">
PC動画
</div>
<div id="mobile" style="display:none;">
モバイル用動画
</div>


wptouchの方のstyle.cssに

#pc{
  display:none;
}
#mobile{
  display:block;
}
を追加する。

こうするとPCではPC用の動画、mobileの時はモバイルの動画が表示されます。

id:oil999 No.2

oil999回答回数1728ベストアンサー獲得回数3202013/01/20 19:49:09

ポイント50pt

JavaScriptの部分で、スマホ用とPC用のスタイルシートの条件分岐を行っていないのが原因と思われます。
下記のように修正し、スマホ用のスタイルシート "sphone.css" とPC用のスタイルシート "pc.css" を用意しましょう。

<script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) {
    document.write('<link rel="stylesheet" href="sphone.css">');
}else if(_UA.indexOf('Android') > -1){
    document.write('<link rel="stylesheet" href="sphone.css">');
}else{
    document.write('<link rel="stylesheet" href="pc.css">');
}
})();
</script>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません