Giả sử tôi chỉ muốn nhắm mục tiêu mọi máy tính bảng và điện thoại, bất kể kích thước, có truy vấn phương tiện cho điều này không? Có thể thực hiện việc này mà không chỉ định kích thước không? Hoặc đang sử dụng kích thước là cách duy nhất để nhắm mục tiêu thiết bị di động chứ không phải máy tính để bàn?truy vấn phương tiện truyền thông css: nhắm mục tiêu thiết bị di động mà không chỉ định chiều rộng, tỷ lệ pixel, v.v.
Tôi đã đấu tranh với điều này trong một vài ngày, nhưng cách tốt để kiểm tra thiết bị cầm tay là chiều rộng tối đa thiết bị. Máy tính để bàn của máy tính không gửi này cho trình duyệt, nhưng hầu hết (nếu không phải tất cả) thiết bị cầm tay sử dụng này.
Trong trường hợp của tôi, tôi muốn thể hiện một phiên bản nén của các trang web trên tất cả các thiết bị (bao gồm cả máy tính để bàn) khi bên dưới có chiều rộng nhất định, mà tôi đã sử dụng
@media all and (max-width: 640px)
Nhưng một popup lớp phủ chắc chắn rằng sử dụng position: fixed chỉ được thay đổi trên thiết bị cầm tay (vì thuộc tính css hoạt động trong tất cả các trình duyệt máy tính để bàn nhưng không phải trên tất cả các thiết bị cầm tay). Vì vậy, cho rằng tôi đã sử dụng một quy tắc bổ sung:
@media all and (max-device-width: 640px)
Trong đó tôi nhắm mục tiêu tất cả các thiết bị cầm tay dưới 640 nhưng không phải trình duyệt máy tính để bàn. Ngẫu nhiên, điều này cũng không nhắm mục tiêu iPad (đó là cách tôi muốn nó) bởi vì nó có chiều rộng thiết bị cao hơn 640px.
Nếu bạn chỉ muốn nhắm mục tiêu tất cả các thiết bị, hãy chọn độ rộng tối thiểu thấp (1px) sao cho thiết bị không loại trừ bất kỳ thiết bị nào bất kể chiều rộng.
Tôi không nghĩ rằng bạn sẽ có quá nhiều may mắn với phương pháp tiếp cận css thuần túy. Bạn sẽ muốn làm một cái gì đó dọc theo các dòng của cách tiếp cận modernizer.js và chúng tôi JS để phát hiện thiết bị và nối thêm một tên lớp vào cơ thể dựa trên đó.
What is the best way to detect a mobile device in jQuery?
Sau đó, bao gồm lớp trong các truy vấn phương tiện truyền thông của bạn để trường hợp đặc biệt các thiết bị di động của các kích cỡ khác nhau.
chiều rộng tối đa thiết bị được Chrome báo cáo trước khi có ai đó đi xuống đường dẫn này. – eighteyes
Tôi đoán đó là mới sau đó, nhưng tôi sẽ cập nhật câu trả lời của tôi. Cảm ơn! –
Tôi đã phải phá vỡ truy vấn phương tiện truyền thông của tôi chỉ tham vọng và sử dụng JS để nhắm mục tiêu các cửa sổ trình duyệt nhỏ hơn. – eighteyes