分辨率相關手機模板

Question

我正在開發一個小手機頁面，該頁面應該只能用於移動設備。 但它應該適合所有Android設備及其分辨率。

模板包括表和夫婦應在百分比收縮有關決議變化的比率圖像

我基本上需要的是聰明的CSS代碼提示，將審議該決議，並從幾個挑我將創建不同的樣式表。

Answer 1

可以使用JS檢測準確的設備和產生樣式表的鏈接它。

//Detect mobile devices 
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())), 

//Detect only iPhone 
iphone = (/iphone/i.test(navigator.userAgent.toLowerCase())); 

//Apply stylesheet for mobile devices 
if(mobile){ 
    var cssLink = document.createElement("link"); 
    cssLink.setAttribute("type", "text/css"); 
    cssLink.setAttribute("rel", "stylesheet"); 
    cssLink.setAttribute("href", "css/mobile.css"); 
    document.head.appendChild(cssLink); 
} 

//Apply stylesheet for iPhone only 
if(iphone){ 
    var cssLink = document.createElement("link"); 
    cssLink.setAttribute("type", "text/css"); 
    cssLink.setAttribute("rel", "stylesheet"); 
    cssLink.setAttribute("href", "css/mobile.css"); 
    document.head.appendChild(cssLink); 
} 

或檢測使用媒體查詢max-device-width所有移動設備：

@media only screen and (max-device-width: 480px) { 
    /* CSS for mobile */ 
} 

請注意，我設置max-device-width到480px。這是因爲移動設備的屏幕測量，它在參考像素比實際設備像素大。 例如既iPhone 3和具有在橫向和縱向模式設備寬度320px。一些Android設備返回設備寬度480px。