iT邦幫忙

0

網頁 RWD 平板橫式操作方式

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

看更多先前的討論...收起先前的討論...
用畫面大小來判斷顯示模式,就不符合RWD的規範了吧!

RWD,要讓CSS決定如何顯示,而不是用程式判斷
skyksl066 iT邦新手 5 級 ‧ 2020-10-13 12:22:01 檢舉
你可以用navigator.userAgent來知道使用者是手機還是電腦,然後讓程式判斷要載入哪組css,就可以解決滑鼠鍵盤操作模式的問題
感謝 japhenchen 大的指教
感謝 skyksl066 大的指教,因為目前設計稿討論後有很多是根據寬度來確認是甚麼裝置決定操作邏輯的設計,那這邊會再跟設計做溝通,謝謝分享。
還是別用HOVER觸發選單比較好,公共電腦沒鍵盤沒滑鼠只有觸控螢幕,你也無法由agent來判斷是手機或電腦,這會是盲點
好的,感謝 japhenchen 大的分享,看來得再去跟設計重新確認一次設計稿了,謝謝您。
這狀況我也遇到過,原來的網頁設計者偏好使用hover(mousemove, moseover . mouseout),導至網頁在手機跟平板上無法操作,他還煞有其事的用width區分手機或電腦,但因為手機進到2K時代,區分手機跟電腦螢幕的界線愈來愈模糊,用agent也會遇到新瀏覽器或跨界瀏覽器( Chrome, Edge, Firefox)而遇到麻煩,我接手後,大手一揮,把所有的hover事件改成onclick,事情解決..

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

1 個回答

1
通靈亡
iT邦研究生 3 級 ‧ 2020-10-13 12:18:27
最佳解答

你這個需求應該是要判斷裝置是不是電腦或非電腦了吧

你可用 mobile-detect.js
http://hgoebl.github.io/mobile-detect.js/

剛好最近鐵人賽有一天有介紹到裝置偵測的部分
原理是從userAgent裡面抓
https://ithelp.ithome.com.tw/articles/10250404

感謝通靈亡大大,那這邊想確認一下以設計的角度來看也不建議是用螢幕寬度來設計操作邏輯嗎?

通靈亡 iT邦研究生 3 級 ‧ 2020-10-13 13:10:18 檢舉

我不太清楚你們行動裝置跟桌上型電腦的UI操作差異會不會非常的大

如果不會的話你可以參考下面這個文章,有分好橫式跟直式的Meidal Query,用CSS控制即可

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

感謝通靈亡大的分享,這文章我在研究一下吧

我要發表回答

立即登入回答