2012-03-05 69 views
1

在開發具有響應式CSS設計的網站時,您的網站會根據客戶的屏幕大小更改信息呈現方式。在很多情況下,屏幕尺寸越小意味着顯示的信息越少。響應式設計的服務器端包含什麼?

假設你有一個專爲桌面設計的網站。在您的服務器端代碼中,您可以進行多個數據庫查詢,然後在頁面上以某種形式顯示該信息。

現在,讓我們說你的CSS設計在響應和一些信息不顯示給小屏幕設備。可以說,其中的一些信息是來自數據庫查詢未顯示的信息。這意味着當移動設備加載此頁面時,服務器端代碼正在進行不必要的數據庫調用,因爲結果信息不會由於其屏幕大小而顯示給最終用戶。

響應式設計通常使用CSS媒體查詢來確定根據設備屏幕大小顯示哪些信息。爲響應式設計編寫有效且高效的服務器端代碼的好方法是什麼?

+1

您可以使用javascript來檢查窗口寬度,並要求用戶轉到像m.example.com這樣的移動版本,或者只是重定向 – Ibu 2012-03-05 17:27:16

+1

如果您沒有向小屏幕用戶顯示信息,那麼您是做錯事。他們可能不得不滾動或點擊一個標籤才能看到它,但信息應該在那裏。 – Quentin 2012-03-05 17:44:25

+0

@Quentin然後,一百萬個MAJOR網站做錯了。看看亞馬遜網站的手機優化版本,並將其與您在桌面上看到的內容進行比較... – 2012-03-05 18:42:07

回答

2

您是否考慮過使用AJAX將關於屏幕大小的傳遞數據傳遞迴服務器端的PHP?然後根據相應的CSS設計運行查詢。如果您的移動設備不支持JavaScript或瀏覽器將其禁用,則會出現問題。您還需要額外的維護 - 如果您更改CSS以顯示或多或少,則必須更新腳本以保持同步。

一般而言,我相信CSS媒體查詢的目的是用來優化各種尺寸內容的顯示,但忽略內容的「損失」。這可能意味着額外的查詢/計算/內容被加載但隱藏。對此的好處是,如果您的用戶在縮小的瀏覽器中操作,然後將其最大化,則會全面顯示整個頁面。但是,如果他們沒有完整的內容,除非刷新頁面,否則他們將無法充分利用它。

我認爲你需要問自己 - 你的部分額外的構建和維護工作值得在後端保存一些查詢嗎?

+0

您的觀點關於一個桌面用戶縮放他的瀏覽器窗口,而不必刷新頁面以獲取所有內容是一個非常好的點... – 2012-03-05 18:48:37

+1

此外,我已考慮通過屏幕大小通過AJAX回到服務器,但問題是,當用戶加載第一頁時,服務器完成處理併發送所有內容。因此,即使您爲屏幕尺寸設置了一個「$ _SERVER」變量,它在下一頁被訪問或第一次被刷新之前不會生效。 – 2012-05-24 16:53:40

1

@jakobud您可能想看看以下文章和演示文稿,討論如何在移動和/或響應式設計環境中結合客戶端和服務器端功能檢測的方法。

Adaptation: why responsive design actually begins on the server

Pragmatic responsive design

Detector: Combining browser and feature detection in your web app

+1

只是我嗎?還是這個演示文稿的男人/女孩讓你死?幾頁後,我放棄了,有一個完整的幻燈片頁面,只是一個字?並一遍又一遍地重複同樣的事情,你會得到什麼?無論如何,這是一個很好的答案:) – Val 2013-01-20 22:07:32

0

我發現你的問題早在我的響應式設計的探索,我覺得你有同樣的擔心我:如果我把所有這一切努力使前端適應用戶所擁有的設備,我應該儘可能在提供適當的材料方面付出一些努力?

但是,我對「響應式設計」運動的理解(如果適合稱之爲?)是提供一個默認網頁,通過重新設置顯示方式,靈活地縮放到所有設備尺寸。

如果您的網絡資源是在PC或筆記本電腦上呈現的全部胖版本中的一些交互或信息變得完全不切實際或不適當,那麼現在是時候建立您的網站的移動版本,智能手機應用在這一點上,你可以做一些服務器端檢測瀏覽器,並從www.example.com重定向到mobile.example.com。