支持桌面和移動設備的單個JQuery頁面的提示？

我目前有一個網站託管一個頁面，我想同時爲桌面和移動瀏覽器提供服務。桌面設計和實現已經完成並使用JQuery。支持桌面和移動設備的單個JQuery頁面的提示？

我希望當用戶在JQuery Mobile支持的移動瀏覽器上訪問時，讓此頁面使用不同的佈局。

我試圖找出最好的方法來做到這一點，但似乎無法找到有關此最佳做法的信息。我可以找到的所有現有文檔/指南都假設您正在編寫的jQuery頁面完全支持移動瀏覽器，因此不支持桌面格式。

選項，似乎很明顯：

相同的頁面，但是，現有的內容重新格式化爲移動
相同的頁面，但與addtional標記是重複現有內容，但被格式化的頂部只是額外的標記爲移動。如果是桌面瀏覽器，則非移動內容將隱藏/未呈現。
的一些動態檢測移動與非移動則2個不同的網頁（桌面與移動）

我覺得＃2可能是最簡單的，但我不喜歡重複的想法之間路由內容在頁面中。＃1似乎是不現實的，認爲我可以用一堆標記來增加我現有的內容，以神奇的方式將其格式化爲移動設備（同時還支持桌面）。

我很感激任何關於可能存在的關於最佳實踐的指南的提示和指針。

澄清：假設我沒有使用Rails，ASP.NET MVC等

來源

2011-05-01 TMC

看一看http://jquerymobile.com/其良好的資源 – XGreen 2011-05-01 00:23:25

CSS媒體查詢是爲這個偉大的。（注意，它們是CSS3），它基於查看代理的大小（並且它動態更新！），某些內容可以隱藏或顯示，使其基本上成爲選項＃1和＃2的變體。你將擁有一個全功能的桌面佈局，包括樣式和jQuery，當屏幕很小時（意味着它是一個電話或者是一個調整瀏覽器大小的書呆子），你可以隱藏一些更加細節的東西並重新編寫一些東西，也許顯示一些其他的東西。閱讀媒體查詢這裏：http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html 編輯：只是爲了澄清，你可以完全自定義元素與媒體查詢，所以，在桌面大小，div可能有虛線邊框，圓角，10px填充等，而在手機格有1px的填充，固體邊框等

來源

2011-05-01 00:45:52

我能看到這些查詢怎麼會隱藏基於一些有用的元素瀏覽器大小，所以tx爲指針。然而，這並不能幫助我，但是我有一個元素，我希望看起來像在桌面上看到另一種方式，而在移動設備上看到另一種方式，例如， '

Hello World

'。在桌面上說，我希望它格式化大字體，而在移動設備上我希望它更小，或者使用jQuery Mobile，我希望它可以在可摺疊控件中使用。 – TMC 2011-05-01 00:51:08

你也可以通過媒體查詢來做到這一點。您可以爲不同類型的設備或分辨率創建不同的樣式表。嘗試使用Google搜索。 – 2011-05-01 01:35:09

我敢肯定，你是通過這個問題的方式，因爲這個問題是幾個月前，但我想我會提供我是什麼致力於解決相同類型的問題。

問題：我想要一個可在移動設備，平板電腦和大小屏幕上使用的網站。

解決方案：

CSS媒體查詢是顯而易見的選擇，讓網頁的規模和「響應」到用戶的視口。現在有一個巨大的推動和關於響應式設計，響應式圖像等一些有趣的談話。我設計移動第一（另一推），並使用媒體查詢來改變佈局/可視內容，因爲屏幕變得更大。
然後JavaScript出現了一個大問題。如果我使用移動JS框架，那麼它也將包含在我的桌面版本中 - 這並不理想。如果我同時使用jQuery，那麼我在我的移動版本中會獲得很多額外的帶寬，我寧願不要。我決定使用Modernizr來允許我使用Modernizr的新媒體查詢測試來根據屏幕大小加載腳本。這使我可以保留一頁，並將其用於各種屏幕尺寸，而不會犧牲移動/平板電腦/桌面的質量。一個簡單的Modernizr的媒體查詢檢查如下：

if (Modernizr.mq('only screen and (max-width: 480px)')) { 
    Modernizr.load('/mobile.js'); 
} else if (Modernizr.mq('only screen and (max-width: 768px)')) { 
    Modernizr.load('/tablet.js'); 
} else { 
    Modernizr.load('/desktop.js'); 
}

來源

2011-07-25 21:37:00 swatkins

支持桌面和移動設備的單個JQuery頁面的提示？

回答

相關問題