web-dev-qa-db-ja.com

Mobile Safari Viewport-水平スクロールを防止しますか？

モバイルSafariのビューポートを構成しようとしています。ビューポートメタタグを使用して、ズームがないこと、およびビューを水平方向にスクロールできないことを確認しようとしています。これは私が使用しているメタタグです。

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

IPhoneでページをロードすると、大丈夫に見えます：

screenshot

しかし、水平にスクロールできるので、次のようになります（これは、可能な限り右側にあります：

screenshot

これを横向きにすると、ページは期待どおりにレンダリングされ、水平スクロール位置がロックされます。

このページをまったく水平にスクロールしないようにする方法を見つけようとしています。コンテンツを押し出すページ要素を持っている可能性はありますか？正しいビューポートセットでそれが可能になるとは思っていませんが、ここでストローを把握しています。

mobilemobile-safariviewport
24
Aaron Vegh

コンテンツを押し出すページ要素を持っている可能性はありますか？

はい、そうです。ビューポート設定は、表示されるビューポート領域のみを定義しますが、横方向のパンをオフにすることは扱いません。

そのため、これを回避するには、コンテンツを含む要素にoverflow：hiddenを設定するか、要素がオーバーフローしないようにします。

NB：他のモバイルブラウザもしばらくの間ビューポートメタタグをサポートしているため、それらでもテストする必要があります。

20
andreasbovens

body { overflow-x: hidden; }も機能します。

14
HaL

ここでのパーティーに遅刻しましたが、iPhone 5で水平スクロールを行うと同様の問題が発生しました。サイトは事実上2倍の幅で表示され、右半分は完全に空になりました。

実際、ビューポートメタタグを次のように変更する必要がありました。

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />

に：

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

「初期スケール」を追加すると、期待どおりに垂直にスクロールするようにロックされました。

10
Codecraft

body div {overflow：hidden;} @メディアクエリ

。これにより、要素がコンテンツを押し出すことを防ぎます。

6
Jose Miguel

私だけなのか、投稿されたコードの一部が間違って入力されたのかはわかりませんが、

これは

<meta name='viewport' content='content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

このように読まない

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

そのため、コンテンツは、コードの末尾に「終了がない」ために一度だけリストされます。

4
Venomage

このバリエーションをお試しください

html, body{ overflow-x: hidden; }

3
ibeseda