Mobile Safari đệm trắng/lề trên bên phải

Question

Tôi đã kiểm tra các chủ đề khác nhưng tôi dường như không thể tìm ra điều này. Kiểm tra trang web này tại đây: http://www.mf.jlscs.com/

Khi ở chế độ xem dọc trong Safari di động, tôi có thể cuộn sang phải để trống, đệm trắng. Tôi không muốn điều này.

Ở chế độ xem ngang, cuộn này không có ở đó và nó hiển thị như tôi muốn.

Tôi không biết điều gì đang gây ra sự thúc đẩy bí ẩn này. Tôi đã cố gắng để loại bỏ overflow-x, nhưng điều đó không làm các trick. Nếu tôi loại bỏ tràn-x trên mỗi vùng chứa, thì hiệu ứng tương tự này được phép xảy ra cho mỗi vùng chứa trong trang. Ý tưởng nào?

Answer 1

Điều này có thể là do một trong hai yếu tố cấu trúc của bạn vượt quá chiều rộng cơ thể của bạn. Tìm kiếm mã số giống như width: 100%; padding 20px; hoặc thứ gì đó sẽ khiến nó phát ra.

Tôi đề xuất đặt đường viền màu đỏ trên tất cả các div chính và thấy thủ phạm nào và mở rộng ra rìa.

Answer 2

Tôi khuyên bạn nên tải xuống Nhà phát triển web cho Firefox và chỉ cần bật Outline> Outline Block Level Elements.

Answer 3

Chỉ cần thêm đường viền vào một số div có thể khiến bố cục thay đổi. Thêm phần này vào dưới cùng của css của bạn để tìm các phần tử bất hảo:

* { 
    background: #000 !important; 
    color: #0f0 !important; 
    outline: solid #f00 1px !important; 
} 

Tôi cũng làm một bookmarklet mà thực hiện điều này thông qua javascript để nó có thể dễ dàng được sử dụng trên trang web bất kỳ. http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Answer 4

Thật vậy, vấn đề này là do các yếu tố "giả mạo" mở rộng ra ngoài chiều rộng tài liệu vì một lý do nào đó.

Một phương pháp là sử dụng CSS ở trên, chưa thử, nhưng tôi không chắc chắn cách dễ dàng để phát hiện các phần tử bằng cách sử dụng đường viền.

Một cách tiếp cận khác nhau sẽ được chạy JS mã trong giao diện điều khiển để tìm thấy chúng:

Array.prototype.filter.call(document.querySelectorAll('*'), function (node) { return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth });

này sẽ trả về một mảng của tất cả các yếu tố whos chiều rộng + bù đắp (khoảng cách từ trái sang) có kích thước lớn so với clientWidth. Sau đó, bạn sẽ cần phải kiểm tra các yếu tố và tìm hiểu lý do tại sao chúng hoạt động như thế này - trong trường hợp của tôi, chân trang có width:100% và , khiến chiều rộng của nó lớn hơn 20px chiều rộng của tài liệu.

Điều thú vị là điều này chỉ được thấy trên iPhone chứ không phải trên Android.