Re: [問題] mobile web的作法

[chrisQQ (ＣｈｒｉｓＬｉｕ)]

※ 引述《backfish (121)》之銘言：

: 我的問題是，
: 我不知道detectmobilebrowsers.com這個網站裡提供的判斷程式的準確度夠嗎？
: 雖然我用自己的手機跟桌機測試是確實可以正確判斷的，
: 但我總還是不禁懷疑這個判斷程式的可靠性。
: 然後好像不少國外網站都是用第一種作法，

瀏覽器吐的資訊就只有 user agent。

（當然還有其他 header 啦...）

不過 user agent 可以自己改，嘛...

從使用者那邊過來，能改的東西最好都不要完全相信就是了。

可以拿來輔助，但不要絕對相信他並祈禱他正常。

: 也就是只有一個版本的網站，光靠media query去作各種寬度的調整而已。
: 這也會讓我覺得這樣作感覺比較專業。

這也只是感覺 XD，基本上一般使用者才不會管你是分開做還是用 RWD

該選擇哪種方法應該跟你的團隊溝通。

像我這種懶人，就決定用 RWD 的方法做。

因為以後如果後端有動到程式，我也只要改一份。

（雖然 css 大概也是要改兩份 XD）

不過如果 view 分開的話，就要改兩個地方。

我的邏輯：兩個地方 > 一個地方。麻煩（咦？）

: 想問有製作手機版網站的大家都是怎樣的作法呢？

看你的需求是怎麼樣，依照你網站呈現的內容和主要使用客群來決定

如果你的內容就是主打 mobile 的 user，甚至精細到可能會需要到仿原生 APP 的樣子

那我可能會推薦你分開寫。

當然要用 RWD 的方式寫也是可以，但前提是你要夠了解 desktop 與 mobile 的差異

甚至是 safari mobile、chrome mobile 與 android browser 中間的差異。


另外就是，規劃的操作流程與動線

如果你今天是重新寫一個網站，且上面的規劃很有 sense

那你可以考慮用 RWD 的方式下去配置 html 的部份，

通常會很難轉成 RWD 的重點在於舊的網頁動線與操作方式都只有考慮到 desktop 的部份

即使耗費功夫下去硬用 media query 套成手機版，多多少少還是會有不順的地方。

（在不更動 html 的情況下。）

雖然透過 javascript 可能能補救一點，但通常的情況大概是朽木不可雕也…

這大概是一般狀況，不過如果遇到有 sense 的 html 架構的話，

我想應該不會太難（？）

→ LaPass:如果打算用media query，那一開始在寫網頁時就要一直切換大
→ LaPass:小，看看兩邊的排版狀況變的怎麼樣。這是一開始寫的時候就
→ LaPass:要注意的事情。
因為 html 架構就要預先想好了

→ LaPass:但如果是一開始先寫pc板，後來才想到手機板，再去補手機的
→ LaPass:CSS，那通常是來不及了，倒不如重新寫一個手機版網頁。如果
→ LaPass:當初MVC有做好，這項工作應該不會太費事才對，只要改View就
→ LaPass:好。但如果沒有做好，資料、控制、顯示通通都雜在一起....
→ LaPass:那恭喜了，工作量通常會趨近於把整個網站重新寫過.....
這種狀況，如果時間允許，我會推薦乾脆把原本的砍掉重練

改用 RWD 的方式。（因為我很懶 XD）

css 套用只要 developer tool 打開馬上就可以修改，改完在複製貼上回去，

後端有的改完要重整（竟然連重整都不願意，是有多懶），

有的要重新 complie，有的要重新 deploy

太懶啦～～～

→ LaPass:至於判斷網頁類型，因為瀏覽器基本上可以偽裝，所以大概只
→ LaPass:有靠JS去判斷瀏覽器寬度才比較可靠，但這也不準確，因為有
→ LaPass:時候有人會把瀏覽器視窗縮的很小....
這跟 media query 是一樣意思啊 XD

→ LaPass:折衷方案是使用不準確的判斷方式，用server端去判斷，然後
→ LaPass:在網頁的最上方加上「檢視手機板」跟「檢視電腦版」的按鈕
server 端也是只能拿到 user agent 來判斷… 其實跟用 javascript 是一樣的





我覺得 RWD 的用意就是在「不管你是什麼版，我都想辦法提供最好的使用者體驗給你」

而不是用 user agent 去判斷

「你是手機版，不管你寬度，我就決定只吐給你手機的內容，
你是桌機版，即使是 15寸 CRT 1024*768，我還是吐塞得很滿的桌機內容給你」


呣，應該說是，你今天寬度 480，好，我就給你 480 不會亂掉的樣式

你今天寬度 768 我就給你 768 適合的樣式

你今天大於 1920，那我就設定 1920 的樣式給你

你今天 dpr = 2，有可能是 iphone 的 retina 螢幕，好，那我就吐 2 倍大小的圖給你


說這麼多廢話，大概等於這樣一句話

「可視範圍決定他的排版，而不是讓裝置種類決定」



總之，不管哪種方法，我覺得還是依照你的需求下去選擇會比較好。




如果要用 RWD 的方式的話，我可以偷偷推 SCSS/SASS 嘛 XD

不用 RWD 的方式的話，我還是要推啦（根本強迫中獎）

--
好像講了一堆廢話…

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 219.85.64.11
推 On1earth:最近作了幾個RWD的版面，要考慮大/小畫面呈現的情況，有
→ On1earth:時為了一個元素要擺在哪、怎麼呈現就花掉半天的時間@@
推 backfish:感謝詳細回覆
推 evenwu:偷推 http://d.pr/qODk