表題通りです。
タブレットから見た時にギリギリレスポンシブにしないという事で、css
@media screen and (max-width: 767px) {<!--なかみ-->}
と設定。
組んだものを簡単に説明
・<☆div class="innerbox">にwidth890pxを指定、レスポンシブ時には95%。
・footerに背景指定、width100%
html
<body>
<div id="wrapper">
<div class="innerbox">コンテンツ</div>
<footer>
<div id="innerbox">
フッターなかみ
</div>
</footer>
</div>
</body>
css
#wrapper {
overflow:hidden;/*上の参考リンク様で紹介してる方法がこれ。*/
}
.innerbox {
width:890px;
margin:0 auto;
}
footer {
height:293px;
margin:20px auto;
background:url(../img/foot_backimg.gif) repeat-x ;
font-size:12px;
padding-top:30px;
}
@media screen and (max-width: 767px) {
.innerbox {
width:95%;
}
footer {
height:auto;
background:#e8fbd8;
padding:20px;
}
結果：ダメ、フッターは収まっても上部コンテンツの右端が切れる。
そりゃそうだ、hidden指定だもの。
なぜ切り替わらないレスポンシブ分を出したかというと、まあ干渉してるのでは？と個人的に感じたので。
空白ができる理由はわかっていて、iPadの横サイズが768pxで、そこにfooterのwidth100%が効いてる。でも上部分のコンテンツはレスポンシブに切り替わらずに890px幅で見せているので、結果フッターが短く見えてしまっているんですな。
結局どうしたか。
footerにmin-widthを指定してあげる。css
footer {
min-width:890px;
height:293px;
margin:20px auto;
background:url(../img/foot_backimg.gif) repeat-x ;
font-size:12px;
padding-top:30px;
}
@media screen and (max-width: 767px) {
footer {
height:auto;
background:#e8fbd8;
padding:20px;
min-width:inherit;
}
とりあえずコレで治りました。
ipad側からしてみれば「ココは890pxで、フッターは100%でしょ？！なら768pxであってるじゃない！」なんでしょうね。
そうなんだよね・・・でもそうじゃないんだ・・・。
この指定も解決策として微妙な感じがするけど、実際のところどうなんだろうか・・・。
いまいちスッキリしないままです。
メモ代わりに急いで書いたので、変な箇所や良い解決策などご指摘・ご教授していただけるとありがたいです。