Tôi đã đọc gần như tất cả các câu hỏi về stackoverflow liên quan đến vấn đề này, nhưng không có gì hoạt động như tôi mong đợi.Truy vấn phương tiện đáng tin cậy để chỉ phát hiện iPad (hoặc tại các thiết bị di động 1024x768 tốt nhất)
Nó đã được yêu cầu tôi để phát hiện chỉ các thiết bị iPad (hoặc ít nhất ~ 1024x768 di động thiết bị) với một truy vấn phương tiện truyền thông. Tôi cố gắng để sử dụng
@media screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
...
}
nhưng truy vấn phương tiện truyền thông này cũng phù hợp với Chrome (và Safari, tôi đoán) trên máy tính xách tay và máy tính để bàn Win32/MacOS khi độ phân giải được thiết lập để 1024x768 (nhưng không firefox). Tôi đã thử truy vấn phương tiện này xác định orientation:portrait và orientation:landscape nhưng không có may mắn. Nó cũng được công nhận trên trình duyệt webkit trên máy tính để bàn.
Bạn có thể thử this fiddle để kiểm tra sự cố.
Sau khi tìm kiếm tôi đến this interesting article trong đó được ghi
Tôi nghĩ Safari (và các trình duyệt WebKit khác tôi đã thử nghiệm trong) đều không tuân theo spec, trong khi Firefox và Opera.
Tính năng truyền thông 'chiều rộng' mô tả chiều rộng của khu vực hiển thị được nhắm mục tiêu của thiết bị đầu ra. Đối với phương tiện liên tục, đây là chiều rộng của khung nhìn (như được mô tả bởi CSS2, phần 9.1.1 [CSS21]) bao gồm kích thước của thanh cuộn được hiển thị (nếu có).
vì vậy tôi cố gắng này (fiddle) với 1009px như max-device-width (1024-15)
@media screen and (min-device-width: 768px)
and (max-device-width: 1009px) {
...
}
và không hoạt động
nhưng nếu tôi sử dụng truy vấn phương tiện truyền thông này cũng định hướng (fiddle)
@media screen and (device-width:768px) and (orientation:portrait),
screen and (device-width:1009px) and (orientation:landscape) {
...
}
đáng ngạc nhiên (với tôi) nó dường như hoạt động đúng cách và dường như chỉ phù hợp với safari/iPad.
Q: truy vấn phương tiện này có đủ đáng tin cậy cho nhu cầu của tôi không? Nó luôn hoạt động trong iPad/iPad2? Hoặc tôi phải mong đợi một số trường hợp cạnh và kết hợp bất ngờ với một số độ phân giải thiết bị khác? Trong trường hợp như vậy, bạn có thể đề xuất truy vấn phương tiện hiệu quả và đáng tin cậy hơn không?
Cảm ơn bạn :) (và xin lỗi vì tính cách rườm rà)
Whats mục đích chính xác? Ví dụ. sẽ có iPad 3 vào tháng tới, với độ phân giải màn hình khác. Và có - tôi mong đợi các máy tính bảng khác để phù hợp với quá. – Lennart
Mục đích chính xác chủ yếu phù hợp với ipad/ipad2. Tôi biết rằng điều này không có ý nghĩa nhiều về mặt RWD (sự khác biệt giữa điện thoại di động và máy tính để bàn 1024x768 là gì? Họ nên được xem là cùng một điều IMHO) nhưng vì đã yêu cầu tôi làm điều đó trong css thuần túy, tôi muốn đạt được điều này - nếu nó có thể tất nhiên. – fcalderan
Bạn đang cố gắng làm cho một trang web thân thiện với iPad? Nếu trường hợp đó xảy ra, bạn nên làm cho trang web 'cảm ứng' thân thiện với mọi thiết bị và trong trường hợp đó bạn có thể sử dụng các thư viện như modernizr để đánh hơi nếu thiết bị hỗ trợ các sự kiện chạm (để bạn có thể chuyển đổi tệp css nào được hiển thị trong javascript) – Skuld