使用應用程序主題時，如何最好地處理移動和桌面CSS檢測

Question

我目前有一個Web應用程序，它使用主題將其作爲SkinA或SkinB進行皮膚處理。到目前爲止，這已經是一個沒有任何關注移動設備的Web應用程序，因此site.css文件（在兩個主題文件夾中）都定位到普通的桌面設備。

但是，如果不改變整個項目中的任何web表單aspx文件，我現在需要創建一個移動版本的site.css文件（對於兩個主題），這將改變佈局，因此看起來有點兒在移動設備上查看時更清潔。

我在一篇聽起來相當合理的文章中發現了以下片段，但是，由於使用了主題文件夾（並且從我對主題的理解很少，我認爲所有CSS文件都會自動包含），我不確定我怎麼做到這一點。

摘自：http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/#mobile-stylesheets

首先，定義了兩個樣式表：一切screen.css正常瀏覽器和antiscreen.css覆蓋，你不希望在移動設備上的任何樣式。在另一個樣式表core.css這兩種樣式結合在一起：

@import url("screen.css"); 
@import url("antiscreen.css") handheld; 
@import url("antiscreen.css") only screen and (max-device-width:480px); 

最後，爲移動瀏覽器的其它樣式定義另一個樣式表handheld.css在頁面上鍊接它們：

<link rel="stylesheet" href="core.css" media="screen"/> 
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/> 

或許有是一個更好的方式來完成這一點，同時保留使用主題？

Answer 1

我在一個我正在做的項目中遇到過這個問題。

你可以這樣做的一種方法是使用Modernizr。

這是一個JavaScript庫，您可以在modernizr.com上獲得。

它會測試目標瀏覽器，如果它支持觸摸事件，它會爲您的網頁元素添加一種「觸摸」風格。一般來說，如果Modernizr這樣做，它不是平板電腦就是手機。然後你用「.touch」爲你的手機/平板電腦的CSS添加每種風格的前綴。

將此與媒體查詢結合起來，您應該能夠處理大部分（可能不是全部）設備。