Q&A
私の回答で記述していますがブラウザの仕様による動きです。
テキスト入力時に予測変換表示領域を確保する為、テキストボックスが画面最下部に配置されている場合には質問の様な現象が起きます。
「仕様」なのでそれに合わせて設計するしかない、以外は言えないので控えてたけど後から何度も回答ついてるみたいなんで再度。
表題のとおりですが、iOS Safariにて、inputタグにフォーカスし、キーボードが表示されているときに
画像のようにページ最下部、htmlタグの下に余白ができてしまいます。
css
1body { 2 background: url('image/hoge.jpg') #ff6; 3}
背景色は反映されるのですが、背景画像をこの余白分埋めることは可能でしょうか。
可能であればCSSで、できなければjsでも良いです。
こちらで確認しているバージョンは、iOS 10, 11です。
以下は試しましたが、だめでした。
css
1body { 2 background-size: cover: //意味なし 3 background-size: 100% 100%: //意味なし 4}
余白自体は、GoogleやYahooでも同じようにでてしまうので、なくすことはできなさそうと思っています。
よろしくおねがいします。
追記
キーボードとともに、アドレスバーが表示されていることも余白が出現する条件のようです。
回答4件
0
<body>の大きさは変更できないので、jqueryでフォーカスイン/アウト時に20px動かすようにしてみました。
```html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
body {
margin: 0;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
justify-content: flex-end;
background: url("https://www.photolibrary.jp/mhd5/img533/450-20170708173121221103.jpg") #ff8;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
</head>
<body>
<input type="text" id="textbox">
<script type="text/javascript">
$('#textbox')
.focusin(function(e) {
$(this).css('margin-bottom', '20px');
})
.focusout(function(e) {
$(this).css('margin-bottom', '');
});
</script>
</body>
</html>
```
背景をはみ出させるとスクロールバーが出てしまうので、これでいかがでしょうか？
投稿2018/07/26 09:08
総合スコア672
0
以下のcssを反映してみる
css
1html, 2body{ 3 width: 100%; 4 margin-left: 0; 5 margin-right: 0; 6}
出来なかったら
overflowの設定
body直下をdivなどで囲い、overflow: hidden;を指定なども試してみては。
投稿2019/03/25 04:29
総合スコア284
どれも試してみましたが、ダメでした...
Apple Developer Forumsで質問してみたのですが、そちらでも回答がないので、
どうしようもないのかもしれません。
意外とシンプルに body{padding:0; margin: 0;} なのかなとも
思いますが!important指定での優先順位だったり
background-size: contain;としてみたり。
背景画像云々の問題でない場合は
viewportはどのようにされていますか？
<meta name="viewport" content="width=device-width" />
指でタップしたときの誤操作対策で指の接地面と指先のまるくなってる部分の誤差を埋めるためということもあるのかもしれないですね。
指先でタッチしようとしたのに実際はちょっと下の方をタッチしていることになるので。
やったことないので暇なときにためしてみますね。
アイフォンの設定で
アクセシビリティを選んで
視差効果をへらすを on/off切り替えてみて
見え方が変わるかためしてみてもいいかもしれませんね。
ふと、その余白の部分を見ていたら
キーボードの変換候補を表示する余白に見えるね。
アイフォン自体が必要とする余白なのかもということでしょうか。
何か分かれば追記しておきますね。連投すみませんでした。
0
CSS
1.body { 2 backgound: url('image/hoge.jpg') #ff6; 3 background-size: cover; /*追加*/ 4}
これやってみても駄目でしょうか？
投稿2018/07/26 06:48
総合スコア3763
はい、ダメでした...
そうですか。。
ならば input[type="text" ] { margin-bottom: 0 !important; }とか？
（※セレクタは問題のフォームを確実に選択できるものに変更してみてください。）
あ、上記のコードに body {padding-bottom: 20px; }とか、なんか適当に余白いれてみるのも合わせてやってみてもらえます？
paddingやmarginをいじっても、余白は消えません。。
http://mimhhs.moo.jp/test.html
こちらにサンプルのコードをあげましたので、お時間有りましたらデベロッパーツールなどで触ってみてください。
効果あるかわからないですが、
１．1行目に<!DOCTYPE html>を入れる
２．input要素のfont-sizeを16px以上に設定する
の2つを試してみてもらえますか？
効果なしです。。
むぅ、そうですか。。。
手強いですね。
どなたか猛者が現れると良いのですが。
不可能な気がするので、現在Appleに問い合わせています。。
そうですね、inputにフォーカスした状態で下に現れる余白は、
諸々の挙動からして通常のCSSのコントロール範囲外にあるように思えますね…。
Appleからの返答で理由がわかったら是非お知らせください。
当方
・iphone7
・iOSは最新版
で提示されたサイトを確認したところ、ご質問のような余白はなく、普通に背景が表示されました。
そして、提示されている画像とサイトの画面にかなり差異があったので、できれば全く同じソースにしていただけると現象の確認がしやすいと思います。
特定のバージョンで起きるという可能性も捨てきれませんが。。。
只今、スクリーンショットを撮ったときと同じ状態にしました。ご確認ください。
ありがとうございます、確認できました。
inputがbodyの一番下に配置されているため、inputフォーカス時上移動した結果、表示範囲が画像の範囲<body>を超えてしまっていますね。
回答に書いてみるのでやってみて下さい。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/26 09:53
2018/07/26 10:08
2018/07/26 13:58
2018/07/27 00:18
2018/07/27 01:56