2010-04-18 24 views
5

Có cách nào để phát hiện một hệ điều hành bằng JQuery hoặc CSS không? Với CSS tôi đề cập đến một cái gì đó tương tự như <![if !IE]>Tôi làm cách nào để sử dụng phông chữ cụ thể khi người dùng đang chạy Linux?

tôi cần phải sử dụng một phông chữ cụ thể chỉ khi trang web được xem sử dụng Linux và không muốn bao gồm này với khác của os

+5

Đối với phông chữ đặc biệt, bạn có thể chỉ định một danh sách và nếu phông chữ đầu tiên không được tìm thấy trên chính cơ cấu đó, dự phòng tiếp theo được sử dụng, sau đó tiếp theo, v.v. –

+0

Khi Stanford lần đầu tiên cài đặt một hệ thống timesharing cho sinh viên đại học, nó là babysat bởi một ubergeek (Richard Gabriel?) Người trả lời tất cả các câu hỏi của tôi với "Tôi có thể nói với bạn rằng, nhưng đó là những gì bạn thực sự muốn biết?" Câu hỏi này nhắc tôi nhớ về những ngày đó ... – Spike0xff

Trả lời

8

Mặc dù không trả lời trực tiếp câu hỏi "phát hiện O/S", bạn có thể đạt được hiệu quả mong muốn khi chọn phông chữ bằng thuộc tính CSS font-family.

Thuộc tính này cho phép bạn chọn danh sách phông chữ, nơi trình duyệt sẽ cố gắng khớp các phông chữ có sẵn trên hệ thống. Nó đọc từ trái sang phải và sẽ sử dụng phông chữ đầu tiên có sẵn:

body 
{ 
    font-family: "Calibri", "Arial", "Sans Serif" 
} 

Trong trường hợp này, nếu "Calibri" font không có sẵn, hệ thống sẽ sử dụng "Arial". Nếu không tìm thấy "Arial", nó sẽ sử dụng bất kỳ phông chữ nào có sẵn trong gia đình "Sans Serif".

Với điều này, bạn có thể chỉ định phông chữ dành riêng cho Linux trước và biết rằng các nền tảng khác không có phông chữ sẽ hiển thị bằng cách sử dụng phông chữ phù hợp.

+2

Điều gì ngăn người khác cài đặt các phông chữ này trên một hệ thống khác? Điều gì về các hệ thống không cài đặt các phông chữ này? Đây là một cách khủng khiếp để phát hiện hệ điều hành. – Brad

+3

Theo trạng thái câu trả lời của tôi, đây không phải là câu trả lời để cố gắng phát hiện hệ điều hành, nhưng cách hiển thị một phông chữ cụ thể tùy thuộc vào những gì có sẵn. –

+0

Xin lỗi, tôi đã đọc sai bài đăng của bạn hôm qua. Nếu bạn đã thực hiện một chỉnh sửa, tôi sẽ vui vẻ rút lại lời nói của tôi. (SO sẽ không cho phép tôi xóa nó mà không có một chỉnh sửa của 1 ký tự hay như vậy, vì nó weas ysterday.) Xin lỗi về những rắc rối! – Brad

13

kiểm tra navigator.userAgent

Bạn thường có thể tìm thấy những gì bạn tìm kiếm với rx đơn giản nhưng để làm như vậy sẽ đòi hỏi một sự hiểu biết cơ bản của sniffing. Bạn có thể tìm thấy một ví dụ tốt here.

LƯU Ý: tôi không đề nghị bạn sử dụng thư viện đánh hơi, chỉ cần bạn làm quen với những gì bạn cần tìm kiếm.

Theo cách tự động kiểm soát phông chữ của hệ điều hành, tôi nghĩ rằng, chặn một số trường hợp cạnh không được nêu trong câu hỏi của bạn, chỉ cần xác định font stack là đặt cược tốt nhất của bạn.

3

Tôi thích kết hợp jQuery và CSS để giải quyết vấn đề này. Cách tiếp cận này được lấy cảm hứng từ modernizr, nó tự động bổ sung tất cả các khả năng của trình duyệt như các lớp vào phần tử html.

// Detect Browser 
$.each(jQuery.browser, function(i, val) { 
    $("html").addClass(i); 
    $("html").addClass(val); 
}); 
// Detect Operating System 
$("html").addClass(navigator.platform); 

Kết quả chạy mã trên cung cấp cho tôi kết quả này khi tôi xem trang và kiểm tra DOM. Một vấn đề là tôi đang dùng Mac với Chrome nhưng đối tượng trình duyệt của jQuery nghĩ rằng tôi đang sử dụng Safari, đây cũng là trình duyệt webkit.

<html class="webkit version 535.1 safari MacIntel"> 

Nếu bạn in navigator.useragent javascript của bạn sẽ nhận được một kết quả với nhiều thông tin như thế này

Mozilla-5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1 

msie là nhãn jQuery.browser giao cho IE vì vậy tôi có thể làm một cái gì đó như thế này trong css của tôi mà không cần phải báo cáo có điều kiện nếu tôi thêm trình duyệt như một lớp học để html hoặc cơ tags:

h1 { /* my regular h1 styles */ } 

.msie h1 { /* IE edge case styles for h1 treatment */ } 

trong jQuery bạn có thể sử dụng tuyệt vời của nó công cụ chọn để tìm kiếm phiên bản # và nhiều loại combo khác nhau để nhắm mục tiêu các sự cố trực tiếp chỉ áp dụng cho các phiên bản trình duyệt và kết hợp hệ điều hành cụ thể. Chỉ cần xuất toàn bộ lớp userAgent html, chỉ cần chắc chắn xóa chuỗi ký tự /().

http://api.jquery.com/jQuery.browser/

@Sky có một liên kết tuyệt vời để http://www.quirksmode.org/js/detect.html này có thể được sử dụng để có được trình duyệt chính xác hơn và thông tin hệ điều hành mà bạn có thể nối thêm như các lớp học để các phần tử HTML.

1

Bạn có thể kiểm tra Selector Trình duyệt của Rafael javascript http://rafael.adm.br/css_browser_selector/ - bạn sẽ có thể để xác định browser-, os-, và Brower/os combo cụ CSS, trong một hình thức đơn giản:

(.os)(.browser) selector {...;} (như vậy, ví dụ như .opera {color: red;})

Nó hỗ trợ rất nhiều của os và rất nhiều trình duyệt

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