在iPhone网站上禁用水平滚动 [英] disabling horizontal scroll on an iPhone website
问题描述
我正在开发iPhone版本的Wordpress驱动的网站，我想知道当在iPhone的Safari中打开网站时是否有任何方法可以禁用水平滚动.现在，我正在开发的一半，只是要检查是否可以禁用水平滚动，我已经隐藏了超出屏幕宽度的所有元素，但仍然可以向右水平滚动.我尝试将以下代码放在< head> 的< style> 标记内，但这无济于事:
I am developing an iPhone version of a Wordpress driven website and I was wondering if there's any method to disable horizontal scrolling when the website is open in Safari for iPhone. Right now, I am half way through the development and just to check if I could disable horizontal scrolling, I have hidden any of the elements which were exceeding the screen width but still I can scroll horizontally to the right. I tried putting the following code inside the <style> tags in the <head> but that didn't help:
body {overflow-x:隐藏;}
body { overflow-x: hidden; }
我已将以下< meta> 代码放在头文件中，以便在用户通过iPhone查看网站时进行回显，但它只会禁用用户捏合，即您无法放大和缩放捏住屏幕即可退出.
I have put the following <meta> code inside the head file to echo if the user is viewing the website from an iPhone but it only disables user-pinching i.e. you cannot zoom in and zoom out by pinching the screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
我当前正在使用iPhone 4来检查网站，可以通过以下链接访问该网站: http://ignoremusic.com .期待你们的解决方案，谢谢.
I am currently using an iPhone 4 to check the website and the website can be accessed by going to this link: http://ignoremusic.com. Looking forward to a solution from you guys, thanks.
解决方案:正如@Riskbreaker所建议的那样，有些元素的宽度超过了〜312px，这就是为什么我仍然可以向左滑动并在调整所有此类元素的宽度后，我禁用了水平滑动.我学到的一件事是隐藏对于iPhone/iPad，overflow-x没有帮助，您必须将所有元素的宽度减小到您的宽度屏幕，否则您仍然可以水平滑动.
SOLUTION: As suggested by @Riskbreaker, there were a few elements which were exceeding the width of ~312px which is why I could still swipe to the left and after adjusting the width of all such elements, I disabled horizontal swipe. One thing which I learned is that hiding overflow-x doesn't help in the case of an iPhone/iPad, you have to reduce the width of all the elements to that of the width of your screen otherwise you'll still be able to swipe horizontally.
推荐答案
像这样在您的身体上添加溢出物:
Add overflows on your body like this:
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">
这篇关于在iPhone网站上禁用水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
