禁用iPhone網站上的水平滾動

我正在開發Wordpress驅動的網站的iPhone版本，我想知道是否有任何方法來禁用水平滾動，當網站在Safari的iPhone打開。現在，我已經完成了一半的開發工作，只是爲了檢查是否可以禁用水平滾動，我隱藏了超過屏幕寬度的任何元素，但仍然可以水平滾動到右側。我試着把下面的代碼放在<head>的<style>標籤裏面，但是沒有幫助：禁用iPhone網站上的水平滾動

body {overflow-x：hidden; }

我已經把下面<meta>代碼的頭文件中，如果用戶正在查看從iPhone的網站呼應，但它僅禁止用戶捏即你不能放大，捏住屏幕縮小。

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

我目前使用的是iPhone 4，檢查網站和網站可以前往以下鏈接訪問：http://ignoremusic.com。期待着你們的解決方案，謝謝。

SOLUTION：正如@Riskbreaker建議，有哪些是超過〜312px的寬度是少數幾個元素，爲什麼我仍然可以向左側滑動並調整所有這些元素的寬度後，我禁用了水平滑動。我學到的一件事是隱藏 overflow-x在iPhone/iPad的情況下沒有幫助，您必須將所有元素的寬度減少到您的屏幕寬度的寬度，否則您仍然會能夠水平滑動。

來源

2013-04-08 Fahad Hasan

所以根據你的「解決方案」部分 - 是否有辦法強制禁用水平滾動，如果有離屏元素？ – 2016-12-22 22:43:19

加在你的身上溢出這樣的：

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">

來源

2013-04-08 13:14:31 Riskbreaker

謝謝您的回覆，但添加CSS代碼無效，我仍然可以水平滾動。 – 2013-04-08 13:33:41

你是否在style.css或你的主css上添加了這個？還有一些CSS會在你的響應中被忽略，像這樣：'#headertop {width：980px;}'......這會使水平滑動...只需要一個需要修復的例子... – Riskbreaker 2013-04-08 13:46:36

只是爲了檢查它是否工作，我使用

禁用iPhone網站上的水平滾動

回答