如何爲移動設備加載一個樣式表，併爲桌面加載一個樣式表？

我想這樣做的原因是我們在我們想要隱藏的「桌面版」上放置了下拉菜單（因爲它們在觸摸屏設備上不能很好地工作），並顯示簡化菜單只是「基本」的聯繫。如何爲移動設備加載一個樣式表，併爲桌面加載一個樣式表？

檢測設備時，由於分辨率是他們中的一些（三星Galaxy S3爲例）太高了，我不能讓媒體查詢工作。

有沒有Javascript或我可以用的東西？喜歡的東西（我不知道的Javascript所以這只是想法）：

if mobileDevice then load mobile.css 
else 
load desktop.css

只是基本概念:-)

具體

來源

2012-11-14 rensaskiten

你就不能使用用戶代理？ – Magus

這可以爲設備而不僅僅是瀏覽器完成嗎？例如，我想讓桌面計算機上的Safari在iPhone上加載desktop.css和Safari以加載mobile.css。 – rensaskiten

我很確定計算機上safari的用戶代理與iPhone上的safari不同。 – Magus

使用media屬性的屏幕，比如

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

而對於手持設備可以使用此

<link rel="stylesheet" media='screen and (min-width: 200px) and (max-width: 400px)' href='stylesheet.css' />

或

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="handheld" />

或使用@media查詢針對特定的屏幕分辨率，如果你想比你只需有1種樣式，但你可以定義不同的畫面風格類似這樣的

@media screen { 
     /* Styles for screen goes here */ 
} 

@media print { 
     /* Styles for print goes here */ 
} 

@media all and (min-width: 600px) { 
    /* Styles for specific screen resolutions */ 
}

來源

2012-11-14 08:34:13

+1適當的方式。 – Bojangles

@JamWaffles謝謝:) –

的問題是，三星Galaxy S3例如具有1280×720的分辨率這將載入「desktop.css」 – rensaskiten

試試這個：

<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/> 
<link rel="stylesheet" type="text/css" href="screen.css" media="screen"/>

來源

2012-11-14 08:47:29 brightboy2004

據我所知，絕大多數主流移動設備都不支持media =「handheld」。否則，這將是一個不錯的解決方案。 – rensaskiten

我發現一對夫婦的代碼「片斷」，我不知道他們是否可以合併成一個工作腳本？

if(Browser.Platform.name == 'android' || Browser.Platform.name == 'ios') window.location = dir+mobileFolder+"/index.html"+page; 

//*** Could the above be combined with the below in some way? *** 

function loadcssfile(filename, filetype){ 
// if (filetype=="css"){ 
    var fileref=document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename) 
} 
if (typeof fileref!="undefined") 
    document.getElementsByTagName("head")[0].appendChild(fileref) 
//} 

loadcssfile("stylesheet.css", "css")

來源

2012-12-06 13:34:06 rensaskiten

如何爲移動設備加載一個樣式表，併爲桌面加載一個樣式表？

回答

相關問題