基本上那是兩套網頁,各適用在桌機及手機。很少很少能做一套適用兩處。因為瀏覽器不同、螢幕寬度不同、連滑鼠操作或手指操作都不同。硬要一套網頁做到適用兩處,會很麻煩。
所以,基本上就是做兩套,再由 http header 中的 userAgent 去判斷 client 是桌機還是手機,決定連到桌機版還是手機版。
這位前輩的說法,是屬於比較早期(智慧型手機、平板普及化),所用來解決的方案。算是你有多少設備我就寫多少方案去相容你的設定這樣子;後來普及化之後,規格越來越多,才延伸到使用下面這一位邦友所說。
iT邦幫忙MVPwiseguy提到:
基本上就是做兩套
兩三年前就開始有回應式網頁的設計,也就是只作一套就可以了。
現在新版的CMS也都朝向這方面演進。
RWD 是運用切版的技巧, 在不同的解析度上, 重排所有版面.
如果切版和元件規劃得宜, 可以做到只動 CSS3, 不動其他元素, 就能在兩種解析度之間切換. 最多只要寫 3 個不同的 CCS3 排版指令檔, 就足以切換.
但是, 如果切版階段要做到元素共用有困難的話, 那當然只好為不同的解析度, 另外製作不同的元素 (Element), 好在切換的時候可以替換. 此時就很難說要動到甚麼程度? HTML 也可能要動, 甚至 Javascript 也可能要動.
所以, 一切的關鍵都在切版技術上...
建議先從 CSS3 學起, 這樣已經可以應付很多了...