Truy vấn phương tiện CSS để chỉ nhắm mục tiêu iPad và iPad?

Xin chào, tôi đang làm việc với nhiều thiết bị máy tính bảng, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad, v.v.Truy vấn phương tiện CSS để chỉ nhắm mục tiêu iPad và iPad?

iPad - 1024 x 768
LG Pad - 1280 x 768
Galaxy Tab - 1280 x 800

tôi muốn nhắm mục tiêu iPad chỉ sử dụng CSS3 truy vấn phương tiện truyền thông. Kể từ đó, chiều rộng thiết bị của LG và iPad là cùng 768px - Tôi gặp sự cố khi tách từng thiết bị.

Tôi đã thử sau đây để tách, nhưng dường như không có tác dụng:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ 
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */ 
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */

Tôi không biết các thiết bị pixel tỷ lệ -webkit và các tùy chọn * -webkit khác và giá trị của họ để nhắm mục tiêu cho iPad. Tôi không muốn sử dụng JavaScript cho phong cách, bất kỳ ý tưởng nào?

Nguồn

2011-11-25 Hossain Khan

khía cạnh tỷ lệ thiết bị-me sẽ làm việc trên thiết bị iPad, nhưng giá trị chính xác để sử dụng là 768/1024 –

108

Cuối cùng tìm ra giải pháp từ: Detect different device platforms using CSS

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> 
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

Giảm gọi HTTP, điều này cũng có thể được sử dụng bên trong bạn hiện tập tin CSS chung:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { 
    .ipad-portrait { color: red; } /* your css rules for ipad portrait */ 
} 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { 
    .ipad-landscape { color: blue; } /* your css rules for ipad landscape */ 
}

Hy vọng điều này sẽ hữu ích.

tài liệu tham khảo khác:

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

Nguồn

2012-02-29 18:25:17

Chỉ trong trường hợp bạn đang tự hỏi, điều này sẽ chuyển đổi kiểu nếu thiết bị được xoay mà không cần phải sử dụng Javascript. –

Tất cả iPad có cùng độ phân giải? Tôi nghĩ có 3 độ phân giải cho các phiên bản khác nhau. Và tôi đoán nó là không thể dự đoán nếu nhiều nghị quyết sẽ đi ra. – Dan

Quay lại trong những ngày, khi tôi đang làm việc trên nó, không có iPad Mini. Vì vậy, tôi không biết độ phân giải màn hình mà nó báo cáo là gì. Tuy nhiên, truy vấn phương tiện CSS này đã hoạt động cho iPad retina. Vì vậy, tốt hơn nên kiểm tra trên các thiết bị thực tế để chắc chắn hơn. –

Vâng khá cùng một câu hỏi và đó cũng là một câu trả lời =)

http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

@media only screen and (device-width: 768px) ... 
@media only screen and (max-device-width: 1024px) ...

tôi không thể kiểm tra nó hiện vì vậy hãy kiểm tra nó =)

Cũng tìm thấy một số chi tiết:

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

Hoặc bạn kiểm tra trình điều hướng bằng một số javascript và tạo/thêm tệp css với javascript

Nguồn

2011-11-25 16:12:37

Bạn cần nhắm mục tiêu thiết bị bằng Tác nhân người dùng, sử dụng một số tập lệnh. Các tác nhân người dùng dành cho iPad là:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Nguồn

2011-11-25 17:43:06

Phát hiện trên máy chủ có một số lợi ích. Sau khi phát hiện trên máy chủ, tôi sẽ thêm một lớp vào phần thân của phản hồi để hỗ trợ trong việc lựa chọn CSS. – Oren

Đây là câu trả lời hay nhất.Việc phát hiện các thiết bị của bên thứ ba cụ thể dựa trên độ phân giải và độ phân giải pixel màn hình chính xác không phải là bằng chứng trong tương lai và không phải trong mục đích của CSS. Các tác nhân người dùng phía máy chủ không bao giờ là một giải pháp tốt được phân biệt đối xử, vì vậy cái này nên ở trên cùng. – daluege

@ FilipDalüge Đây là hư không gần với câu trả lời tốt nhất. Miễn là bạn đang sử dụng các truy vấn phương tiện để khắc phục các vấn đề về khoảng cách CSS, nó không quan trọng nếu đó là bằng chứng trong tương lai hoặc nếu nó kích hoạt trên các thiết bị khác có cùng kích thước màn hình. Câu trả lời trên nhắm mục tiêu một phiên bản * chính xác * của Mobile Safari vốn vô dụng, vì nó thậm chí sẽ không xử lý tất cả các thiết bị iPad trong một thế hệ duy nhất. –

<html> 
<head> 
    <title>orientation and device detection in css3</title> 

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" /> 
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> 
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" /> 
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" /> 
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" /> 

</head> 
<body> 
    <div id="iphonelandscape">iphone landscape</div> 
    <div id="iphoneportrait">iphone portrait</div> 
    <div id="ipadlandscape">ipad landscape</div> 
    <div id="ipadportrait">ipad portrait</div> 
    <div id="htcdesirelandscape">htc desire landscape</div> 
    <div id="htcdesireportrait">htc desire portrait</div> 
    <div id="desktop">desktop</div> 
    <script type="text/javascript"> 
     function res() { document.write(screen.width + ', ' + screen.height); } 
     res(); 
    </script> 
</body> 
</html>

Nguồn

2014-12-18 09:31:19

Tôi hơi muộn để trả lời câu này, nhưng không có ở trên làm việc cho tôi.

Đây là những gì làm việc cho

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    //your styles here 
    }

Nguồn

2015-06-11 09:13:49 Baig

Cảm ơn bạn, nhưng khi thay đổi giữa chế độ ngang và chế độ chân dung, điều đó trở nên lộn xộn đối với tôi. Vì vậy, tôi đã phải thêm 'và (định hướng: chân dung)' và 'và (định hướng: cảnh quan)' để css không đụng độ. Vì vậy, đối với bất kỳ ai không hiểu ý tôi, tổng truy vấn phương tiện trông như thế này cho ảnh chân dung: '@media all và (device-width: 768px) và (device-height: 1024px) và (orientation: portrait) { // kiểu } ' – Coco

Truy vấn phương tiện CSS để chỉ nhắm mục tiêu iPad và iPad?

Trả lời

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