CSS：iPhone/iPad Safariは余白や余白を要素の周りに追加しますか？

Question

私が現在取り組んでいるサイト（roemlunchdinner.nl）はすべての主要なブラウザでうまく見えますが、iPhoneとiPadのSafariは余分な余白やページの下部の要素の周囲を埋め尽くしているようです。私は余白を設定しようとしていて、すべての関連要素をゼロにして特定の幅などを設定していましたが、役に立たないようにしました。これは他のブラウザでは再現できません。誰でもここで何が起こっているのか考えていますか？

私はここにいるので、まだスクリーンショットを投稿できません。

Safari Windows screenshot

Safari iPad screenshot

Answer 1

は、iPad用 @mediaだけ画面とメディアクエリを使用してみてください（デバイス-幅：768px）ここで私が投稿したかったスクリーンショットへのリンクです{ はあなたcss ... }

さまざまな幅を付けて見てください。これが役に立ちますようにお願いします。

Answer 2

モバイルSafariは、ユーザーにとって何が判読可能かを推測して要素のサイズを変更します。

あなたのCSSでこれを行うことにより、サイト全体この動作を上書きすることができます

body { -webkit-text-size-adjust: none; } 

またはあなただけの個々の要素をターゲットにすることができます。