Có truy vấn phương tiện CSS nào để phát hiện Windows không?

Question

Tôi muốn chỉ định hai màu nền hơi khác nhau, một cho Mac OS, một cho Windows.

Answer 1

không có tài sản để xác định hệ điều hành sử dụng để xem trang web, nhưng bạn có thể phát hiện nó với javascript, đây là một số ví dụ cho việc phát hiện Hệ điều hành:

var OSName="Unknown OS"; 
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows"; 
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; 
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX"; 
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux"; 

console.log('Your OS: '+OSName); 

nhận nó ?, bây giờ bạn có thể chơi với document.write để viết bản định kiểu tải xuống cho hệ điều hành cụ thể. :)

ví dụ khác, tôi giả định rằng bạn đang sử dụng jquery.

if (navigator.appVersion.indexOf("Win")!=-1) 
{ 
    $(body).css('background','#333'); 
} else { 
    $(body).css('background','#000'); // this will style body for other OS (Linux/Mac) 
} 

Answer 2

Trong CSS, không thể. Hầu hết có bộ lọc @media để bạn có thể nhắm mục tiêu thiết bị di động v.s. thiết bị máy tính để bàn, nhưng không có bộ lọc loại @os.

Bạn có thể đạt được điều đó với các thẻ có điều kiện của IE:

<link rel="stylesheet" href="everyone.css" type="text/css" /> 
<!--[if IE]> 
<link rel="stylesheet" href="ie.css" type="text/css" /> 
<![endif]--> 

Đặt phong cách mac-cụ thể vào 'mọi' css, và sau đó ghi đè lên bất cứ điều gì là cần thiết trong phiên bản trình duyệt IE.

Tất nhiên, điều này sẽ không thành công nếu bạn có người dùng trên phiên bản IE (phiên bản cũ) dành cho Mac, nhưng phải bao gồm tất cả người dùng hiện đại.

Answer 3

nó có sẵn trong phiên bản mozilla mới nhất.

moz-os-phiên bản cung cấp giá trị sau:

• windows-xp
• windows-vista
• windows-win7
• windows-win8

hỗ trợ còn hạn chế https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media (-moz-os-version: windows-xp), (-moz-os-version: windows-vista), 
(-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { 
    body{ 
     background-color: white; 
    } 
} 

Answer 4

Phiên bản cũ hơn của Firefox cũng có thể phát hiện các cửa sổ (đối với những người không sử dụng tính năng tự động xác minh) và đang sử dụng phiên bản 4 hoặc mới hơn. Nó là cơ bản hơn và không nói cho phiên bản, chỉ là một thực tế bạn đang ở trong cửa sổ. Tôi đã tạo ra cái này để thử nghiệm một lúc trước bởi vì tôi tò mò.

@media screen and (-moz-windows-theme) { 
    body { 
     background-color: white; 
    } 
} 

này cũng được bao phủ trong https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries