2012-11-08 34 views
6

Tôi đã bố cục bảng cơ bản bị cắt khi được xem trong thiết bị di động. Cuộn ngang không xuất hiện để hoạt động. Bảng cơ bản bị mắc kẹt và bị cắt. Chỉ cuộn dọc hoạt động. Có thể bật tính năng cuộn ngang trong Jquery Mobile không?Làm thế nào để cuộn theo chiều ngang trong Jquery Mobile?

Ảnh chụp màn hình trên trình duyệt máy tính để bàn:

enter image description here

Ảnh chụp màn hình trên điện thoại di động:

enter image description here

Ảnh chụp màn hình trên trình duyệt máy tính để bàn thay đổi kích cỡ (cuộn ngang cũng không hoạt động):

enter image description here

đang

mẫu:

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

BTW nếu tôi loại bỏ <meta name="viewport" content="width=device-width, initial-scale=1"> công trình cuộn ngang nhưng sau đó chiều rộng của điện thoại di động đã trở thành lớn và mục đích của xem điện thoại di động là khá bị đánh bại. Có cách giải quyết nào không?

+0

Cân nhắc tải một ảnh chụp màn hình để chúng tôi có thể hỗ trợ bạn tốt hơn. Bạn có thể thử gói nó bằng thẻ DIV với 'overflow-x: auto;' – Coby

+0

@Coby không hoạt động, cũng cập nhật câu hỏi của tôi với ảnh chụp màn hình. – IMB

Trả lời

1

Tôi tin rằng bạn có thể đặt thẻ meta viewport thành width cụ thể phù hợp với nội dung của bạn. Bằng cách đó bạn có thể giới hạn độ rộng của trang.

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

Trong một ý nghĩa tổng quát này được cau mày-upon vì nó không đáp ứng như width=device-width là nhưng trong bối cảnh này nó có vẻ giống như những gì bạn cần.

LƯU Ý: Điều này chưa được kiểm tra, tôi chưa bao giờ sử dụng giá trị pixel cho khai báo width trong thẻ viewport trước đây. Sự hiểu biết của tôi là điều này sẽ làm cho mọi thứ xuất hiện theo mặc định, sau đó người dùng có thể phóng to/thu nhỏ để làm cho văn bản dễ đọc hơn.

Cách thay thế được hỗ trợ tốt là sử dụng tính năng giả mạo bằng JavaScript. Có những giải pháp được thực hiện trước như iScroll 4 (những người khác cũng có mặt ở đó nhưng họ đang trốn thoát tôi vào lúc này).

Nếu bạn quan tâm, đây là tài liệu của Apple cho thẻ meta viewport: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html (mà Apple bắt đầu sử dụng trước khi các nhà sản xuất trình duyệt khác)

Các vấn đề liên quan