網頁 RWD 平板橫式操作方式

rwd網頁設計 css javascript

呆呆小將 2020-10-13 11:42:42 ‧ 3045 瀏覽

分享至

如題，以往 RWD 個人都是設置比較制式化的斷點，像是 480 px 以下就抓是手機尺寸，介於 480~768 px 內為平板，768 px 以上為電腦螢幕，但今天 PM 忽然問了一句那橫式平板該如何操作時忽然卡殼了，去看一下 ipad 的尺寸為 768*1024，若是使用上方的斷點那在橫式平板中所使用的操作將會是滑鼠鍵盤的操作方式，對於觸控操作將會非常不友善，特別是 hover 以及 mouseover/mouseleave，想請問各位大神對於不同設備的操作方式是否有甚麼特別的撰寫/設計方式呢？

看更多先前的討論...收起先前的討論...

japhenchen iT邦超人 1 級 ‧ 2020-10-13 12:11:22 檢舉

用畫面大小來判斷顯示模式，就不符合RWD的規範了吧！

RWD，要讓CSS決定如何顯示，而不是用程式判斷

skyksl066 iT邦新手 4 級 ‧ 2020-10-13 12:22:01 檢舉

你可以用navigator.userAgent來知道使用者是手機還是電腦，然後讓程式判斷要載入哪組css，就可以解決滑鼠鍵盤操作模式的問題

呆呆小將 iT邦新手 3 級 ‧ 2020-10-13 12:30:16 檢舉

感謝 japhenchen 大的指教

呆呆小將 iT邦新手 3 級 ‧ 2020-10-13 12:32:18 檢舉

感謝 skyksl066 大的指教，因為目前設計稿討論後有很多是根據寬度來確認是甚麼裝置決定操作邏輯的設計，那這邊會再跟設計做溝通，謝謝分享。

japhenchen iT邦超人 1 級 ‧ 2020-10-13 12:42:10 檢舉

還是別用HOVER觸發選單比較好，公共電腦沒鍵盤沒滑鼠只有觸控螢幕，你也無法由agent來判斷是手機或電腦，這會是盲點

呆呆小將 iT邦新手 3 級 ‧ 2020-10-13 12:47:31 檢舉

好的，感謝 japhenchen 大的分享，看來得再去跟設計重新確認一次設計稿了，謝謝您。

japhenchen iT邦超人 1 級 ‧ 2020-10-13 15:18:41 檢舉

這狀況我也遇到過，原來的網頁設計者偏好使用hover(mousemove, moseover . mouseout)，導至網頁在手機跟平板上無法操作，他還煞有其事的用width區分手機或電腦，但因為手機進到2K時代，區分手機跟電腦螢幕的界線愈來愈模糊，用agent也會遇到新瀏覽器或跨界瀏覽器( Chrome, Edge, Firefox)而遇到麻煩，我接手後，大手一揮，把所有的hover事件改成onclick，事情解決..

唯一不解的事，他們很喜歡用window.open回傳值來處理對話框，改的很累.. ie不能動....

登入發表討論