tắt cuộn ngang trên web di động

Question

Tôi gặp sự cố khi cuộn ngang xuất hiện trên một số điện thoại nhất định cho trang web của tôi. Tôi đã cố gắng đặt overflow-x: hidden nhưng nó không hoạt động. Chiều rộng là tự động, do đó nó sẽ thực sự tự động thay đổi kích thước web để phù hợp với kích thước màn hình. Tất cả các điện thoại khác đều tốt trừ khi được xem trong blackberry, nokia e52 và Windows mobile, cuộn ngang sẽ xuất hiện.

Bạn có lời khuyên nào không? Cảm ơn bạn!

Answer 1

Đối với tôi, thẻ meta chế độ xem thực tế gây ra sự cố cuộn ngang trên Blackberry.

Tôi đã xóa content="initial-scale=1.0; maximum-scale=1.0; khỏi thẻ khung nhìn và đã khắc phục sự cố. Dưới đây là thẻ chế độ xem hiện tại của tôi:

<meta name="viewport" content="user-scalable=0;"/> 

Answer 2

Sử dụng <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" /> để đặt chiều rộng thành chiều rộng thiết bị.

Answer 3

Tôi biết đây là câu hỏi cũ nhưng đáng chú ý là BlackBerry không hỗ trợ overflow-x hoặc overflow-y.

Xem bài của tôi here

Answer 4

tôi đã tìm thấy câu trả lời này over here on stackoverflow mà hoạt động hoàn hảo cho tôi:

này sử dụng trong phong cách

body { 
    overflow-x: hidden; 
    width: 100%; 
} 

Sử dụng này trong thẻ đầu

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 

Một chút bổ sung của tôi trong trường hợp cơ thể của bạn có đệm (để ngăn chặn các thiết bị từ mở rộng quy mô cho cơ thể nội dung hộp, và do đó vẫn còn thêm một thanh cuộn ngang):

body { 
    overflow: hidden; 
    width: 100%; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

Answer 5

Tôi sử dụng này để làm cho người sử dụng vẫn có thể phóng to trong và ngoài:

<meta name="viewport" content="width=device-width;" /> 

Answer 6

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

Chỉ cần thêm CSS này

Answer 7

tôi đã cùng một vấn đề. Thêm tối đa quy mô = 1 cố định nó:

OLD: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

MỚI: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

T.B. Ngoài ra tôi đã sử dụng dấu phẩy giữa các giá trị. Nhưng dường như nó cũng có tác dụng với bán kết tràng.