Jak przewijać w poziomie w Jquery Mobile?

Question

Mam podstawowy układ tabeli, który jest cięty podczas przeglądania w telefonie komórkowym. Przewijanie poziome nie działa. Stół jest w zasadzie zablokowany i odcięty. Działa tylko przewijanie w pionie. Czy można włączyć przewijanie poziome w Jquery Mobile?

ekranu w przeglądarce stacjonarnym:

ekranu na telefon komórkowy:

ekranu o zmienionym rozmiarze przeglądarce stacjonarnym (poziomo przewijania też nie działa):

Kod

Próbka:

<div style="overflow-x:auto"> 
<table> 
     <tr> 
      <td>foo</td> 
      <td>foo</td> 
      <td>foo</td>   
     </tr> 
</table>    
</div> 

BTW jeśli usunąć <meta name="viewport" content="width=device-width, initial-scale=1"> poziome przewijanie utworów, ale potem szerokość ruchomej stała się wielka i cel widzenia telefonu jest dość pokonany. Jakiekolwiek obejście?

Answer 1

Sądzę, że można ustawić swój metatag viewport na określony width, który pasuje do treści. W ten sposób możesz ograniczyć szerokość strony.

<meta name="viewport" content="width=600px, initial-scale=1"> 

W ogólnym sensie to jest mile-upon ponieważ nie reaguje jak width=device-width jest jednak w tym kontekście brzmi to, co trzeba.

UWAGA: To niesprawdzone, nigdy nie używana wartość piksela dla deklaracji width w viewport tagu wcześniej. Rozumiem, że wszystko powinno wyglądać domyślnie, a użytkownik może powiększać/pomniejszać, aby tekst był łatwiejszy do odczytania.

Dobrze obsługiwaną alternatywą jest używanie faux-scrolling z JavaScript. Istnieją gotowe rozwiązania, takie jak iScroll 4 (inne też tam są, ale w tej chwili uciekają).

Jeśli jesteś zainteresowany, tutaj jest dokumentacja firmy Apple dla tagu meta viewport: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html (co Jabłko zaczął używać przed innych producentów przeglądarek)