以下のサイトを参考に作成しましたが、全く反応しません。
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>
No.1
531
75
50pt
>wptouch内ヘッダー内に以下の記述。
この記述は必要ありません。
スタイルシートを機種によって読み分けるロジックですが
wptouchを使用してるので関係ないわけです。
＞wptouch内style.cssに以下の記述を追記
原因を切り分けるために、
687
674
<style>
#box {
overflow: auto;
width: 300px;
height: 200px;
}
#box iframe {
width: 295px; /*PC版の幅－5pxくらい*/
height: 200px;
}
</style>
No.2
1728320
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>
2
1
1
コメント（0件)