檢測低分辨率android設備

Question

我希望能夠檢測當前用戶是否使用低分辨率（< 320px）設備併爲該用戶加載不同的樣式表。有沒有辦法做到這一點？

Answer 1

您可以在網上找到許多文章，解釋如何爲智能手機打造優秀的網站設計。

要回答你的情況，你可以找到一些方法來處理它：

媒體查詢

由於CSS3，你可以使用max-width或device-width。

這將使類似：

<link rel="stylesheet" type="text/css" 
    media="screen and (max-device-width: 480px)" 
    href="shetland.css" /> 

的JavaScript

您可以使用JavaScript來檢查瀏覽器的寬度。

下面是一個例子使用jQuery：

if ($(window).width() < 320) { 
    $("link[rel=stylesheet]").attr({href : "mobile.css"}); 
} else { 
    $("link[rel=stylesheet]").attr({href : "desktop.css"}); 
} 

進一步說

這裏有一些有趣的和有用的鏈接：

• Responsive web Design on Smashing Magazine
• Detect Mobile Devices on about.com
• An older article (but where you can find some useful tips too

Answer 2

那麼首先你檢測與screen.width和screen.height顯示器的分辨率。

if (screen.width < 320 || screen.height < 320) { 
    .... 
} 

然後，您需要實際加載樣式表。最簡單的方法是在任何裝載機或任何東西外包含這個，所以你可以只是document.write它。

if (screen.width < 320 || screen.height < 320) { 
    document.write('<link rel="stylesheet" src="lowres.css"></script>'); 
} else { 
    document.write('<link rel="stylesheet" src="desktop.css"></script>'); 
}