防止jQuery Mobile上的水平滚动 [英] Prevent horizontal scroll on jQuery Mobile

问题描述

有没有办法在移动设备上阻止横向页面滚动，最好只使用CSS？

以下是一个示例：
http：/ /jsfiddle.net/YfLst/15/

更新：以下代码解决了iOS上的问题，但问题仍然存在Android：

  html，body {
 overflow-x：hidden！important; 
 position：relative！important; 
} 
  

解决方案

  
 
 $ b < < link rel =stylesheetmedia =handheld，only screen and（max-device-width：320px）href =phone.css> 
  

并将body宽度设置为100％和overflow-x：hidden，绝对

  body {
 width：100％; 
 overflow-x：hidden; 
 position：absolute; 
 top：0; 
 left：0; 
 
  
 
 
  

如果通过防止水平滚动意味着您的视口（移动屏幕上显示的区域）太窄，应该更大，应在元标记中相应设置视口宽度

 < meta content =width = 999（例如）name =viewport> 
  

Is there a way to prevent horizontal page scroll on a mobile device preferably with CSS only?

Here's an example: http://jsfiddle.net/YfLst/15/

Update: The following code solves the issue on iOS but the problem remains on Android:

html, body {
    overflow-x: hidden !important;
    position: relative !important;
}

解决方案

There are different ways to do that:

You could target mobile devices with a special stylesheet

<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">

And set the body width to 100% and overflow-x: hidden, or even try to position it absolutely

body {
  width: 100%;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

in css.

If by "preventing horizontal scrolling" you mean that your viewport (the area displayed on the mobile screen) is too narrow and should be bigger, you should set the viewport width accordingly in your meta tags

    <meta content="width = 999 (for example)" name="viewport">

这篇关于防止jQuery Mobile上的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！