スマートフォンでiframeが伸びる件の対策

TIPS

f:id:ambergris:20120925111537g:plain

Andoroid携帯でもiPhoneでも、

iframeが中身の分だけ高さとかoverflow:hiddenとか全無視して伸びるので

iframe下のコンテンツに被ってるということが判明。

 

こことか

http://javascript-memo2.seesaa.net/article/200710596.html

ここを参考に

http://ameblo.jp/bofb/entry-10631465099.html

 

１．<head>～</head>の間に↓を追加して、
<script>
(function(){
 var _UA = navigator.userAgent;
 if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) {
 document.write('<link rel="stylesheet" href="css/sphone.css">');
 }else if(_UA.indexOf('Android') > -1){
 document.write('<link rel="stylesheet" href="css/sphone.css">');
 }else{
 document.write('<link rel="stylesheet" href="css/pc.css">');
 }
})();
</script>

２．iframeを適当にdivで囲ってIDをつける。
<div id="box"> 
<iframe src="rss" frameborder="0" width="300" height="200" scrolling="auto"></iframe>
</div>

３．PC版のCSS作る
#box {
width: 300px;
height: 200px;
}
#box iframe {
width: 300px;
height: 200px;
}

４．PC版のCSSを元に、スマホ版を少し改良
#box {
overflow: auto;
width: 300px;
height: 200px;
}
#box iframe {
width: 295px; /*PC版の幅－5pxくらい*/
height: 200px;
}。



こんな感じでスマホのiframe問題解決