web-dev-qa-db-ja.com

iPhone Webサイトでの水平スクロールの無効化

私は、Wordpress駆動型WebサイトのiPhoneバージョンを開発しています。WebサイトがSafari for iPhoneで開いているときに水平スクロールを無効にする方法があるかどうか疑問に思っていました。現在、途中です開発し、水平スクロールを無効にできるかどうかを確認するために、画面の幅を超える要素を非表示にしましたが、水平方向に右にスクロールできます。次のコードを<style>タグ内の<head>しかし、それは役に立ちませんでした：

body {overflow-x：hidden; }

以下を入れました<meta> headファイル内のコードは、ユーザーがiPhoneからウェブサイトを表示している場合にエコーしますが、ユーザーのピンチを無効にするだけです。つまり、画面をピンチしてズームインおよびズームアウトすることはできません。

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

現在、iPhone 4を使用してWebサイトを確認しています。このWebサイトには、次のリンクからアクセスできます： http://ignoremusic.com 。皆さんからの解決策を楽しみにしています、ありがとう。

解決策：@Riskbreakerによって提案されたように、幅が312pxを超えている要素がいくつかあったため、左にスワイプして、このような要素すべての幅を調整した後、水平スワイプを無効にしました。私が学んだことの1つは、overflow-xを非表示にしてもiPhone/iPadの場合は効果がないことです。すべての要素の幅を画面の幅に縮小する必要があります。それ以外の場合は、水平にスワイプします。

iphoneioscssmobile-safarihorizontal-scrolling
19
Fahad Hasan

次のように体にオーバーフローを追加します。

body    {
        font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif;
        font-weight: normal;
        overflow: hidden;
        overflow-y: auto;
        }

そして、はい、これにとどまります：

<meta name="viewport" content="width=device-width">
10
Riskbreaker

私はパーティーに少し遅れていることを知っていますが、私はこれと同じ問題を抱えていて、以下を追加することで解決しました：

body, html{
    overflow-x: hidden;
}

うまくいけば、これは他の誰かを助けるでしょう！

20
Austin737

ビューポート領域の外に配置されたモバイルメニューで同じ問題が発生していました。オーバーフロー-x：非表示の解決Android電話、iPhoneでは不可。メニューの「絶対」位置を「固定」位置に変更することで解決：

body { overflow-x: hidden; }    
nav { position: absolute; width: 300px; right: -300px; }

に：

body { overflow-x: hidden; }    
nav { position: fixed; width: 300px; right: -300px; }

それが役に立てば幸い。

2
Cristiana