# 商城 Mobile 組件 [toc] ## 手機切版寬度範圍 建議手機寬度還蓋範圍: **375px ~ 576px** 例外說明: * 最低寬原為 360px 的裝置多為 Android 4 版本，於 2021 年超過 90% 以上 google play app 不再繼續支援 Android 4.xx 版本。故建議不進行維護。 * iphone SE 的尺寸為 320px，占 iphone 總體市場( 未含 Android ) 1.2% 左右，故不建議列入主要維護項目，只要文字能夠正常顯示即可。 參考依據: [All Phones references](https://yesviz.com/viewport/) [IOS references](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions) ## Header **Naviagtion+SearchBar** :::info ![](https://i.imgur.com/jViUO7l.png) ::: **Naviagtion+SegementBar** :::info ![](https://i.imgur.com/dKZmB1k.png) ::: ### Navigation bar :::info ![](https://i.imgur.com/OqOsVga.png) ![](https://i.imgur.com/aPJ7iKN.png) ::: ### Search bar :::info ![](https://i.imgur.com/F324CBw.png) ::: ## SideBar :::info ![](https://i.imgur.com/0EvG3hv.png) ::: ## Segement bar :::info ![](https://i.imgur.com/EwLmuWb.png) ::: ## Tab bar :::info ![](https://i.imgur.com/weEd7Bo.png) ::: ## Modal :::info ![](https://i.imgur.com/2b4LAqL.png) ::: ## Modal - Bottom sheet 固定置底的 popup menu。 :::info 01 ![](https://i.imgur.com/vP3E9GA.png) ::: ## Modal - Bottom Bar :::info 01 ![](https://i.imgur.com/5RTIOOL.png) ::: ## Modal - Commmon ### Selector ::: info ![](https://i.imgur.com/2aWm0a9.png) ::: ### Path control :::info ![](https://i.imgur.com/9qeW2Er.png) ::: ### List :::info **01** ![](https://i.imgur.com/f8cVmBH.png) **02** ![](https://i.imgur.com/fVzmcjY.png) **03** ![](https://i.imgur.com/FXiSBLB.png) #### List-content ::: info ![](https://i.imgur.com/ThLZCHl.png) ::: ::: ### Card :::info **01** ![](https://i.imgur.com/p0ebLP8.png) **02** ![](https://i.imgur.com/YVi3u3l.png) **03** ![](https://i.imgur.com/fvFdOm5.png) **04** ![](https://i.imgur.com/xnRMWzj.png) ::: ### Menu :::info ![](https://i.imgur.com/cc5kQY6.png) ::: ## Form :::info ![](https://i.imgur.com/ci7qXCf.png) ::: ### 參考 [Google Material Design Guideline](https://m3.material.io/components/badges/overview) [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/components/all-components) ## 題外話 ### 關於在手機版上可恨的 safari 與 chrome 的網址列 與 tabbar 會導致跑版的問題 CSS 在 2021 釋出新的 css units 已可以被 chrome for android 、 safari on iOS、Android browser 支援，這些新的語法可以解決一直不斷發生的被 safari、chrome 網址列擋到的問題。現在支援度雖然還不夠，但感覺可以先記著，明年再來看看他的支援度成長到多少~ https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ https://caniuse.com/?search=dvh https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/