2013-05-23 34 views
15

Xét rằng SingularityGS theo sau, theo cách tiếp cận trên thiết bị di động, làm cách nào để giải quyết vấn đề trong IE8, cho thấy phiên bản di động của mọi thứ phụ thuộc vào truy vấn truyền thông?Bạn có thể sử dụng điện thoại di động đầu tiên trong IE8

Bạn đã tìm thấy giải pháp cho điều này hay tôi phải chuyển sang máy tính để bàn trước?

Cảm ơn.

Trả lời

36

Thay vì làm việc xung quanh IE 7 và 8 thiếu sót, bạn có thể làm cho IE 7-8 thực sự hỗ trợ truy vấn phương tiện truyền thông!

Tôi sử dụng tuyệt đối Respond.js chèn lấp để bật truy vấn phương tiện trong IE 7 và 8. Chỉ cần thêm mã này vào HTML <head> của bạn và bạn đã sẵn sàng!

<!--[if lt IE 9]> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script> 
<![endif]--> 

Bạn cũng có thể muốn kích hoạt selectors CSS3 trong IE 7 và 8 để những thứ như .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } sẽ làm việc.

Bạn sẽ cần vùng chèn Selectivizr. Để Trả lời làm việc cùng với Selectivizr, Selectivizr phải là phiên bản 1.0.3b hoặc mới hơn (chưa được giải phóng là ổn định for two years vì một lý do nào đó) và phải là được tải trước khi Trả lời. Selectivizr cũng yêu cầu NWMatcher hoặc thay thế để được tải trước đó. Vì vậy, theo đúng thứ tự là:

<!--[if lt IE 9]> 
    <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script> 
    <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script> 
<![endif]--> 

Và bạn hoàn toàn cũng cần phải có sự html5shiv polyfill (aka html5shim) để làm cho IE 7-8 hỗ trợ các công cụ CSS3 cơ bản nhất.

Vì vậy, thiết lập cuối cùng của tôi về IE 7-8 polyfills trông như thế này:

<!--[if lt IE 9]> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script> 
    <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script> 
    <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script> 
<![endif]--> 

Lưu ý: không sử dụng IE9.js kết hợp với những người như nó sẽ làm cho IE 8 đóng băng.

+0

Bạn có lưu trữ các tệp .js này cục bộ không? Bạn có thể liên kết với họ qua CDN không? Cảm ơn, –

+0

Bạn có thể biết từ các thẻ tập lệnh mà chúng được lưu trữ trên CDN. Bạn có thể sao chép mã HTML và sử dụng nó trong dự án của bạn mà không sửa đổi. –

+1

Vui lòng không sử dụng Respond.js hoặc Selectivizr. Cả Respond.js và Selectivizr đều tạo ra các yêu cầu HTTP bổ sung cho mỗi mục mà chúng cần phải làm việc và thêm vào bloat vào đường dẫn tới hạn của bạn. Chỉ trả lời các tác phẩm với PX/mQs có chiều rộng tối thiểu dựa trên PX và Selectivizr quá chậm đến mức tôi đã gặp sự cố IE8 với số lượng mục không hợp lý mà nó phải làm việc. Thay vào đó, hãy làm việc với các giới hạn của các trình duyệt bạn đang hỗ trợ và sử dụng tính năng phát hiện và lớp học để hỗ trợ dự phòng. – Snugug

7

Tôi sử dụng Breakpoint được xây dựng trong hỗ trợ Không truy vấn dự phòng kết hợp với các lớp IE trên thẻ HTML của tôi hoặc kiểm tra Modernizr cho hỗ trợ Media Query.

https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks

+0

Cảm ơn. Tôi chưa sử dụng Sass hoặc Modernizr nên tôi không chắc mình có thể thực hiện điều đó. Nếu bạn biết về bất kỳ hướng dẫn hay giải thích nào về cách sử dụng nó, vui lòng đăng tại đây. Tôi tiếp tục đọc về cách nó tuyệt vời như vậy và tiết kiệm thời gian nhưng không có đầu mối làm thế nào để sử dụng nó hoặc thiết lập nó. –

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