Làm thế nào để phát hiện chế độ chụp hẹp trên Metro IE 10 trên Windows 8

Question

Trong Windows 8, sử dụng mẫu Twitter Bootstrap cơ bản, nếu tôi thu hẹp trình duyệt máy tính để bàn IE 10 xuống cửa sổ hẹp (Xem bên phải), nó sẽ rơi trở lại sử dụng các kiểu chiều rộng dành cho điện thoại thông minh: cửa sổ hẹp, cửa sổ cao và rất dễ đọc. Tuy nhiên, nếu bạn snap trình duyệt IE 10 Metro vào một khung nhìn hẹp (xem bên dưới bên trái), nó co lại chế độ xem trang đầy đủ để không đọc được, thay vì sử dụng các kiểu cửa sổ hẹp.

Điều này thật không may, và có thể là hậu quả không mong muốn của thiết kế trình duyệt Metro hoặc lỗi.

Giả sử nó không phải là điều chỉnh trong phiên bản cuối cùng, câu hỏi của tôi là:

1. Có cách nào để xác định rằng trang này đang được xem bởi IE 10 Metro trong chế độ gãy? Tôi muốn làm điều này theo cách phong cách Modernizr, kiểm tra hành vi, chứ không phải là mã hóa cứng IE Metro, mà có thể là một vấn đề trong tương lai. Tuy nhiên, một sửa chữa làm việc là quan trọng hơn vào thời điểm này.

Answer 1

Với sự giúp đỡ từ IEBlog post that Raymond Chen suggested trong các ý kiến ​​trên, tôi đã có thể khắc phục sự cố bằng cách thêm CSS sau đây sau khi phong cách đáp ứng bootstrap:

@media screen and (max-width: 320px) { 
    @-ms-viewport { width: 320px; } 
} 

này ngừng zoom hành vi trong IE 10 Metro (chế độ thanh bên bị gãy) và hiển thị chính xác chế độ xem của tôi được tối ưu hóa cho màn hình hẹp.

Lưu ý cuối cùng: Chiều rộng tối thiểu mà các mẫu Bootstrap Twitter được tối ưu hóa là 480px (có thể do iPhone). Do đó, việc tối ưu hóa thêm cho 320 pixel có thể cần phải được thực hiện để cải thiện trang cho chế độ xem chụp thanh bên của Metro.

Answer 2

Gần đây tôi đã đưa ra giải pháp. Nó dựa trên JavaScript và kiểm tra hành vi theo yêu cầu.

http://menacingcloud.com/?c=targetSnapMode

Khi kết hợp với việc kê khai @viewport, nó làm cho một combo hiệu quả.

@ -ms-viewport {width: chiều rộng thiết bị; } @viewport {width: chiều rộng thiết bị; }

Việc kê khai @viewport trên được thảo luận tại http://menacingcloud.com/?c=cssViewportOrMetaTag

Hy vọng rằng sẽ giúp :)