Phát hiện nền tảng thiết bị khác nhau sử dụng CSS

Tôi muốn nói rằng tôi đã đọc và thử nhiều biến thể của hướng dẫn tại đây:Phát hiện nền tảng thiết bị khác nhau sử dụng CSS

Tôi muốn có sử dụng trang file CSS khác nhau của tôi tùy thuộc vào thiết bị đang được sử dụng. Tôi đã thấy nhiều giải pháp cho điều này, tất cả đều sử dụng một số hình thức ở trên.

Tuy nhiên, khi thử nghiệm trên HTC Desire, tôi luôn nhận được đầu ra dành cho iPad hoặc đầu ra hoàn toàn chưa được lọc. Hiện nay, mã thử nghiệm của tôi dựa trên:

http://www.cloudfour.com/ipad-css/

Đây là tập tin HTML của tôi:

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

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" /> 
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-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: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> 

    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:landscape)" href="htcdesire-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:portrait)" href="htcdesire-portrait.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> 
</body> 
</html>

Và đây là tập tin CSS Cảnh của iPad (Tôi sẽ chỉ cung cấp mà ở đây là họ là tất cả về cơ bản giống nhau:

div 
{ 
    display: none; 
} 

#ipadlandscape 
{ 
    display: inline; 
}

tôi muốn biết những gì thay đổi để làm cho các yếu tố liên kết để đảm bảo rằng ipad được chỉ stylesheets của nó, là iphone được mong htc riêng của mình và (trong trường hợp này) (hoặc sam e độ phân giải/khía cạnh thiết bị) có được bản định kiểu đó.

Nguồn

2011-11-07 Matt W

Vâng, sau khi một số (nhiều hơn nữa) chơi xung quanh và việc bổ sung một số javascript, tôi đã có giải pháp - thiết bị droid đã không sử dụng độ phân giải tôi tin rằng đó là:

<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

2011-11-07 15:32:12

Bạn là một trình tiết kiệm cuộc sống ... đã tìm kiếm truy vấn phương tiện để nhắm mục tiêu iPad. Ví dụ của bạn hoạt động hoàn hảo! Cảm ơn! –

Xin lưu ý rằng hướng dẫn 'chiều rộng thiết bị' và' chiều cao thiết bị 'chỉ hoạt động khi kích thước màn hình ** khớp chính xác với ** số đã cho. Xin lưu ý rằng mã này sẽ không áp dụng cho các thiết bị khác có kích thước tương tự, vì vậy trang web sẽ trông hoàn toàn không phù hợp với chúng! Nếu bạn muốn hỗ trợ tất cả các thiết bị khác (cũng được sản xuất trong tương lai), bạn nên bao gồm một mã cho chúng sử dụng các tiền tố 'min-' và 'max-'. – Dan

Tôi biết điều này là một chút cũ, nhưng tôi đã cố gắng này và đã thành công, ngoại trừ nó mang lại cho tôi kích thước màn hình ở phía trên bên trái. Mã có cần phải thay đổi không? –

Phát hiện nền tảng thiết bị khác nhau sử dụng CSS

Trả lời

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