如何鎖定任何瀏覽器的屏幕寬度？

只需從您的智能手機上訪問此測試網站：ltdcoapp.uphero.com，然後滑動屏幕以查看右側的內容，問題是：屏幕滑動並顯示我想隱藏的內容右邊。如何鎖定任何瀏覽器的屏幕寬度？

我到目前爲止的嘗試是使用body{overflow-x: hidden;}，它只適用於桌面瀏覽器。

你能告訴我該怎麼做，以防止這種情況？

PS：我真的不是要獲得流量的網站，但它是給你看問題容易

2014-02-14 Writz

如果您想隱藏某些東西，請使用'display：none;' – RobinvdA

@ RobinvdA，問題是它沒有隱藏，因爲它是幻燈片放映。 – Writz

你可以嘗試隱藏它，只有當它滑入時才顯示它？ – RobinvdA

你有沒有爲你的overflow設置一個對應的寬度：hidden property？

編輯：寬度等相對值100％不起作用（因爲它們也包含屏幕的右側部分）。它修復了絕對的像素值（在這個例子中：1,024）：

body { 
    overflow-x: hidden 
    width: 1024px 
}

這也可能有助於增加相應的視區元標記在頭：

<meta name="viewport" content="user-scalable=no, width=1024px, initial-scale=1.0" />

而且，將禁止一共滾動成爲解決方案？ Disable scrolling in all mobile devices

2014-02-14 12:27:52 dominikus

是的，但是這也可以防止垂直滾動。 – Writz

你可以嘗試新的建議（即，視口，固定寬度）？ – dominikus

嘗試使用和不使用{width：1024px}行和nope的meta行，它們都沒有工作。是否有防止水平滾動的選項？ – Writz

你可能有身體外部造型的唯一途徑。使用Firefox的樣式信息工具檢查您的樣式。

2014-02-14 12:16:56 good3n

我已經在身體外部設計了樣式，而且Firefox的樣式信息工具與Chrome元素的檢測工具相同。即使用這些工具，他們在這種情況下能夠做什麼好呢？ – Writz

好吧，你需要把樣式放回裏面。它溢出來了。 – good3n

是的，這正是我想要它，溢出，因此隱藏，它從右側回來，它不會溢出，因此可見。 – Writz

這一個會阻止任何觸摸響應，這在我的情況下是沒用的。

document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });

這將是非常有用的，但問題是，它可以防止水平和垂直滾動。

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

這隻適用於桌面瀏覽器。

body{overflow-x: hidden;}

這個嘗試了幾次，所有它這樣做是爲了防止用戶縮放網頁，這在某些時候是有用的，但不解決向右滾動的問題。

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

Thx dominikus，你肯定會幫助。

2014-02-14 13:49:30 Writz

回答