私はWordpressベースのウェブサイトのiPhone版を開発中ですが、ウェブサイトをiPhoneのSafariで開いたときに水平スクロールを無効にする方法はないかと思っています。現在、開発の途中ですが、水平スクロールを無効にできるかどうか確認するために、画面幅を超える要素を非表示にしましたが、それでも右に水平スクロールできます。タグ内に次のコードを入れてみましたが、<style>効果<head>はありませんでした。
本文 { オーバーフロー-x: 非表示; }
ユーザーが iPhone から Web サイトを閲覧しているかどうかをエコーするために、次の<meta>コードをヘッド ファイル内に配置しましたが、ユーザーのピンチのみが無効になり、画面をピンチしてズームインおよびズームアウトすることはできません。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
現在、私は iPhone 4 を使用して Web サイトを確認していますが、このリンクにアクセスすると Web サイトにアクセスできます。翻訳元:皆さんからの解決策を期待しています。ありがとうございます。
解決：@Riskbreaker の提案どおり、幅が約 312 ピクセルを超える要素がいくつかあったため、左にスワイプすることができましたが、そのような要素の幅をすべて調整した後、水平スワイプを無効にしました。私が学んだことの 1 つは、iPhone/iPad の場合、overflow-x を非表示にしても役に立たないことです。すべての要素の幅を画面の幅まで縮小しないと、水平にスワイプすることができなくなります。
ベストアンサー1
少し遅れたことは承知していますが、私も同じ問題を抱えていたので、以下を追加することで解決しました。
body, html{
overflow-x: hidden;
}
これが他の誰かの役に立つことを願っています!