ios - 防止在 iOS 中横向滚动内容

Question

我正在构建一个移动网站，但遇到了一个奇怪的问题。页面横向滚动。不仅如此，标题似乎是固定的，内容似乎横向滚动。如果您查看此 page，问题将得到最好的理解

我尝试为 body、#search-page、#search-controls 设置最大、最小宽度。似乎没有任何效果。

#search-page #header.ui-bar-a{
    background: #fff;
    border: none;
    border-bottom: 3px solid #5D2B44;
    padding:0 10px 4px 0;
    margin:0;
    height:63px;
    text-shadow: none;
}

#search-controls {
    height: 63px;
    padding: 5px;
}

/*#search-controls .br-right {
    border-right: 1px solid #ccc;
}
*/
.search-field {
    width: 100%;
    overflow: hidden;
    height: 26px;

}

.search-field .ui-btn-inner{
    font-size: 12px!important;
    font-weight:bold!important;
}

.filter, .ratings, .name {
    height: 24px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 12px;
    text-transform: uppercase;
    text-shadow: none;
    min-width: 55px;
    padding: 0 2px;
}

.filter{float: left;}
.ratings, .name, .sort-by{float: right;}
.ratings{margin-right: 1px;}

.sort-by {
    font-size: 16px;
    margin: 6px 20px 0 0;
}

/* Stacked List */

.ui-content{overflow-x: visible;}

.ui-content .ui-listview {
    margin: -10px;
}
.ui-listview li{
    padding: 0;
}

.ui-li-static.ui-li {
    padding: 0 15px 0 0;
    margin: 0 0 -10px 7px;
}

.ui-li-static.ui-li-has-thumb {
    min-height: 85px;
    padding-left: 105px;
}

.ui-li-thumb{
    max-height: 85px;
    max-width: 100%;
}

.ui-li-heading{
    color: #5D2B44;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    padding-top: 10px;
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-li-heading .ui-link, .ui-li-heading .ui-link:visited, .ui-li-heading .ui-link:active{
    color: #5D2B44;
    text-decoration: none;
}

.ui-li-desc.cusine {
    font-size: 12px;
    font-weight: normal;
    display: block;
    line-height: 12px;
    padding: 1px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ui-li-desc.cusine {
    color: #999;
    margin: -.9em 0 0;
}

.ui-li-desc.rating {
    color: #666;
    margin: -.9em 0 0;
}

.ui-li-desc.location {
    color: #424242;
    margin: -.2em 0 0;
}

.result {
    height: 85px;
    border-bottom: 1px solid #5D2B44;
    display: block;
    overflow: hidden;
}

.result img {
    width: 95px;
    height: 85px;
    margin: 0 10px 0 0;
    float: left;
}

.result .info {
    padding: 12px 10px 0 0;
    float: left;
    text-shadow: none;
    max-width: 385px;
    height: 75px;
}

.result span {
    display: block;
}

.result .restaurant {
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    color: #5D2B44;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.result .cusine {
    font-size: 12px;
    line-height: 12px;
    color: #999;
    padding: 1px 0;
}

.result .stars {
    height: 12px;
    padding-top: 0px;
}
.result .location {
    font-size: 12px;
    line-height: 12px;
    color: #424242;
}

.rates .rating-number{
    line-height: 12px;
}

Answer 1

尝试从 search-inactive.css 文件中删除 overflow-x:visible 样式。来自http://www.css3.com/网站:

the ‘overflow-x’ property describes what to do with the content that exceeds the element’s width

一些可能相关的 SO 帖子:

• > jQuery Mobile and header/footer issue
• > Prevent horizontal scroll on jQuery Mobile