---
# System prepended metadata

title: 商城 Mobile 組件

---

# 商城 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/