2013-09-30 39 views
0

我們的目標是創建一個在移動設備上工作的網站。 我想一個非常通用的要求。媒體查詢和JqueryMobile - 哪一個可供選擇?

我已閱讀關於媒體查詢&我也涉獵了Jquery-Mobile。

這裏是我的理解

  • jQuery Mobile的面向似乎只有移動設備。

  • 而媒體查詢告訴我該設備是什麼和應用什麼CSS - 但並沒有給我所有Jquery-Mobile的好東西。我不想重新發明輪子,做JM做的事情。

所以問題是

  • 那麼,哪一個我應該選擇?!
  • 或者有沒有辦法將它們結合起來?
  • 標準是什麼(或者是有一個..?)
+1

jQuery Mobile的也適用於桌面瀏覽器,帶或不帶觸摸功能。 – Omar

+0

我知道,但該網站是不是很像桌面..我寧願有什麼是當有人從移動設備訪問該網站的jquery代碼踢。 – PlanetUnknown

回答

0

通過使用相關單位得到您的降壓最大爆炸。使用百分比來表示寬度,填充等等。然後使用em來表示所有字體大小,圖標和填充,這些都與字體大小有關。然後,您可以使用媒體查詢進行小型更改,這些更改需要沿着從小到大的視口大小進行。這種方法的好處在於,該網站保持流暢,因此它會自動將其大部分組件自動調整到視口大小,併爲您節省一些工作量。

欲瞭解更多詳情,請查看本文。 http://alistapart.com/article/fluidgrids

並嘗試從移動版面工作,否則你會發現自己撤消和重做樣式,而不是隻增加你已有的。

+0

謝謝傑夫。但是這並不能回答我們如何在Jquery-Mobile中使用這些功能的問題。 – PlanetUnknown

3

我會保持這個相當一般的:我的觀點是,jQuery mobile &響應式佈局是兩種完全不同的方法。

除了jQuery移動是響應(在適應屏幕尺寸方面),它帶來了大量的開銷。如果你想利用它的特性,你必須調整你的網站結構來匹配jQuery約定,所以它基本上是一個「第二個網站」。這不僅僅是添加腳本。此外,樣式需要花費更多的精力,因爲jQuery移動版將自己的標記添加到頁面中,該頁面通常是嵌套的,並向元素添加大約10個CSS類。話雖如此,如果您使用CMS(例如Wordpress),並且擁有諸如博客等大量數據驅動的內容,那麼使用jQuery移動設備的體驗會更好。 有一些插件,使您的博客變成一個手機頁面輕彈一個開關...

如果你想保留你的網站外觀,它將是完全正確的縮放圖像,更改字體大小和添加有點填充在這裏和那裏,我會去響應佈局。它肯定也需要付出一些努力,特別是如果你從一開始就沒有實現它(移動首先在這裏添加一個流行詞),但它將是一個「輕量級」的方法來解決移動設備。另一件事是響應式佈局可以在任何設備上的「運行時」工作,所以如果您擴展瀏覽器窗口,它將實時適應變化。您可以無縫地更改佈局以適應不同的屏幕尺寸,比如說「手機」,「平板電腦」和「桌面」。使用「流體網格」,您可以將桌面上的三列布局更改爲平板電腦上的雙列布局和移動設備上的單列布局。對於jQuery手機只能在手機網站上使用,當用戶進入網頁時,您必須執行一些或多或少的可靠檢查,以便重定向他/她。因此,不要誤解我的意思,我已經在許多「專爲移動設備」頁面和/或應用程序(通常與Phonegap結合使用)上使用jQuery mobile,除了速度有點慢之外,我還喜歡它。 但是,如果您想優化移動設備的網站,則響應式佈局可能是最簡單的方法。

順便說一句,這基本上是什麼傑夫·鮑爾斯建議,只是有點更多的「技術人員」;)