trang chuyển sang trái khi xoay iPad từ ngang sang dọc

Question

Tôi đang sử dụng truy vấn phương tiện CSS để tạo trang web có thiết kế đáp ứng. Khi tôi mở trang thử nghiệm của mình trên iPad ở chế độ ngang hoặc theo hướng dọc, có vẻ ổn.

Tuy nhiên, khi tôi chuyển từ chế độ ngang sang chế độ dọc, trang được dịch sang trái. Tôi có thể nói rằng CSS chính xác đang tải vì những thứ khác trên trang thay đổi. Tôi cũng có thể kéo trang ở bên phải và nó xuất hiện chính xác như nó nếu tôi đã mở trang trong bức chân dung ban đầu.

Tôi đã viewport của tôi thiết lập để: id meta = "view" name = "viewport" content = "width = device-width, ban đầu quy mô = 1.0, tối thiểu quy mô = 1.0"

tôi đã thêm JavaScript để sửa lỗi chia tỷ lệ chế độ xem iOS được sử dụng để làm cho trang được phóng to khi chuyển từ dọc sang ngang. (Tôi đã sử dụng giải pháp được mô tả tại đây: https://gist.github.com/901295)

Tôi gặp sự cố khi tìm tên cho lỗi mà tôi đang gặp phải khi chuyển từ chế độ ngang sang dọc. Có ai khác nhìn thấy điều này hoặc biết cách sửa chữa không?

Answer 1

Tôi đã sắp xếp được sự cố tương tự của mình - có lẽ điều này sẽ phù hợp với bạn?

Bạn sẽ cần phải tìm ra nếu đó là một div cụ thể hoặc yếu tố khác gây ra nó bằng cách xóa/phục hồi các bit khác nhau và kiểm tra lại trang. Khi bạn đã thử nghiệm, hãy thêm thuộc tính overflow: hidden vào phần tử đó trong CSS của mình - Tôi đã sử dụng overflow-x: hidden vì sự cố của tôi là cuộn ngang nhưng bạn có thể cần phải thay đổi nó.

Hy vọng điều này là sử dụng ... chúc may mắn!

Answer 2

thử thêm các thiết lập sau đây để tính nội dung của bạn: maximum-scale=1

hoặc thử này: user-scalable=no

here is the ios documentation

Answer 3

Chủ sở hữu vấn đề nói rằng cô ấy "cũng có thể kéo trang bên phải và nó xuất hiện chính xác như nó nếu tôi đã mở trang trong bức chân dung ban đầu. "
Điều này khiến tôi nghĩ rằng, vì một số lý do không xác định (một lỗi?), Trang được cuộn sang trái ở hướng thay đổi sang chế độ dọc (nếu không bạn sẽ không thể kéo nó trở lại).

Tôi đã có một vấn đề tương tự và giải quyết nó bằng cách giải quyết JavaScript sau:

// ... 
// Optionally add a conditional here to check whether we are in Mobile Safari. 
// ... 
window.addEventListener('orientationchange', function() { 
    if (window.orientation == 0 || window.orientation == 180) { 
     // Reset scroll position if in portrait mode. 
     window.scrollTo(0, 0); 
    } 
}, false); 

lẽ điều này sẽ làm việc cho người khác quá.

Answer 4

Jereon, JavaScript của bạn đã hoạt động cho tôi. Chế độ xem của tôi là:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,   minimum-scale=1, user-scalable=no" /> 

Tôi đang sử dụng chủ đề phản hồi sạch của công ty Drupal. Tôi đã không gặp vấn đề này bằng cách sử dụng khung chủ đề phản hồi của Omega.

Answer 5

Giải pháp cho việc này là theo đề nghị của @ellawson

Vấn đề là do một số yếu tố không được thu nhỏ lại một cách chính xác bởi trình duyệt khi xoay thiết bị. Tìm phần tử đó và áp dụng overflow: hidden; hoặc overflow-x: hidden; như anh ấy nói.

Answer 6

Tôi gặp phải vấn đề này với iPad và áp dụng html { overflow-x:hidden; }. Điều đó dường như đã giải quyết được vấn đề.

Answer 7

Lưu ý: câu hỏi này là duplicate. Tôi sẽ đăng ý chính của câu trả lời của tôi ở đây.

2015 cập nhật

Tất cả các câu trả lời khác không may là không chính xác, lỗi thời hoặc sai lầm. Đây là những gì hoạt động:

window.addEventListener('orientationchange', function() { 
 
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display'); 
 
    document.body.style.display='none'; 
 
    setTimeout(function() { 
 
     document.body.style.display = originalBodyStyle; 
 
    }, 10); 
 
    });

Mã này nghe các orientationchange event và buộc một tái dòng chảy của các yếu tố body bằng cách giấu nó và hiển thị nó 10 miliseconds sau. Nó không phụ thuộc vào bất kỳ thẻ <meta> hoặc truy vấn phương tiện nào.

Bạn nói,

Khi tôi mở trang thử nghiệm của tôi trên iPad ở ngang hoặc theo chiều dọc, có vẻ tốt. Tuy nhiên, khi tôi chuyển từ chế độ ngang sang chế độ dọc, trang được chuyển sang bên trái

Đó là chìa khóa. Bạn chỉ cần buộc sơn lại body.

Câu trả lời đề xuất thêm <meta name="viewport" content="width=device-width, initial-scale=1.0"> hoặc các biến thể của chúng, như Safari 7, không còn tồn tại. Đây là demo. Để đảm bảo bạn thấy nó hoạt động như thế nào, hãy bắt đầu với iPad ở chế độ ngang, tải trang, sau đó xoay. Chú ý trang không mở rộng đến chiều cao đầy đủ, mặc dù sử dụng flexbox tất cả các cách.

So sánh điều đó với this page, nơi chúng tôi sử dụng kỹ thuật ẩn/hiển thị trong sản xuất.