2013-11-28 87 views
0

所以我一直試圖讓我的網站爲移動設備加載一個單獨的樣式表。我試過所有的媒體查詢方式,而我擁有的兩款測試設備(三星Note 2和iPad 2)都忽略了它們。交換移動設備的樣式表

我在這裏發現了這個腳本,它彈出一個移動設備的警報,它的工作出色。所以我想知道是否可以使用這個腳本來交換另一個樣式表?

 <script> 
if ((navigator.userAgent.match(/iPhone/)) || (navigator.userAgent.match(/iPod/)) || (navigator.userAgent.match(/iPad/))) { 
    alert("we've got an iDevice, Scotty"); 
} 

if (navigator.userAgent.match(/Android/)) { 
    load("Droid me baby"); 
} 
</script> 
+0

這可能是一個重複的問題,http://stackoverflow.com/questions/12043983/how-to-make-style-sheet-for-tablet-and-iphone 我讀過一些開發人員正在查看請求標頭,以檢測設備正在從中請求的瀏覽器。使用它和屏幕的最小/最大尺寸,他們能夠推斷出正在使用的設備。一家在線酒店預訂網站向使用iPhone,iPad和MAC網頁瀏覽器的客戶展示了更爲昂貴的搜索結果。嘿嘿。 – JustinDanielson

+0

發佈一些你已經嘗試過的代碼,這些設備應該能夠處理媒體查詢 – Huangism

+0

設備可以很好地處理媒體查詢,但是基於分辨率的查詢是無用的,因爲大多數設備現在都會使用高分辨率屏幕。 我也嘗試使用「手持」媒體查詢,但它似乎沒有做一件事。 – mediaslave

回答

0

一個很好的使用工具是Respond.js。我在我的網站上使用它,其中@media查詢完全沒有問題,即使對於Internet Explorer也是如此。

  • Galaxy Note 2使用Android,它與CSS媒體 兼容查詢。
  • iPad 2使用iOS Safari,也兼容媒體查詢。

Reference for browser compatibilities

Respond.js

Very good article on responsive design that explains media query use well.

而且就說明無反應,非媒體查詢 - 這是一個偉大的工具,看看有什麼用戶的瀏覽器可以/不能:

Browscap

+0

媒體查詢的問題是,我不得不根據設備,方向和屏幕大小對它們進行一大堆優化。如果我只關注移動設備和屏幕,我可以賭博大多數人在縱向模式下使用他們的移動設備,並讓樣式表直接處理。我想如果我能得到方面媒體查詢正常工作,也可以解決它。 – mediaslave