CSS scroll在移動設備上無法正常顯示

我的代碼位於本文末尾，控制着我的頁面<div>在jQuery Mobile中的<div>。我有這個div做表滾動，因爲它在頁面上水平溢出。然而，它表現爲在這個截圖，：當它被垂直取向發生CSS scroll在移動設備上無法正常顯示

Table fills ~50% of the page, then scrolls

這個同樣的問題，但這種觀點說明它更好。爲了更好地說明兩個邊界，我也側身滾動了div。我希望div在移動設備上簡單地填充頁面的整個寬度，因爲它可以在大屏幕上正確顯示，但如果它溢出，我希望它水平滾動。我已經嘗試了overflow: scroll;和overflow: auto;，此外還嘗試使用代碼-webkit-overflow-scrolling: touch;。我沒有嘗試過設置寬度的方法，但其他方法均已運行，包括width: 100%;和position: absolute; left: 0; right: 0;。

CSS：

@media only screen and (min-width: 1025px){ 
    .ui-page { 
    width: 960px !important; 
    margin: 0 auto !important; 
    position: relative !important; 
     border-right: 5px #111111 outset !important; 
     border-left: 5px #111111 outset !important; 
     border-bottom: none; 
    } 
} 

@media only screen and (max-width: 1024px){ 
    .tblscroll { 
     width: 100%; 
     overflow: scroll; 
     -webkit-overflow-scrolling: touch; 
    } 
}

簡體HTML：

<div data-role="page" id="resultsmain" data-title="Survey Results"> 
    <div data-role="header"><h1>Title</h1></div> 
    <div data-role="content">text 
     <div class="tblscroll"> 
      <table> 
       ...table information... 
      </table> 
     </div> 
    </div> 
</div>

來源

2013-03-19 vaindil

發佈一些代碼的頁面結構。 – Omar 2013-03-19 15:10:38

@Omar我已經更新了，對不起。 – vaindil 2013-03-19 15:14:24

沒關係。在你的情況下，我推薦使用'ui-grid'。檢查這個http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html – Omar 2013-03-19 15:21:23

你可以嘗試使用在你的div元素一個CSS顯示塊寬度定義的寬度的調整百分比。

來源

2013-03-19 14:58:18 blackhawk

看起來好像它的表本身就是問題所在。

我將在表寬度設置爲100％，並修復不會增長或收縮

錶行{寬度：100％; }

來源

2013-03-19 15:04:40 advermark

不幸的是沒有工作。我嘗試過使用CSS和HTML方法將'width'設置爲'100％'，但都沒有解決問題。 – vaindil 2013-03-19 15:07:26

這並沒有真正的幫助，但我今天加載它，它完美的工作。我從昨天到今天都沒有改變，所以它一定是某種緩存問題（儘管我已經清除了我的移動緩存）。

來源

2013-03-20 17:45:45 vaindil

CSS scroll在移動設備上無法正常顯示

回答

相關問題