iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 28

響應式網站注意細節-30天學會HTML+CSS,製作精美網站

現在使用智慧型手機比率最高,手機畫面很小,所以在製作網頁時應注意以下細節

只顯示重要的資訊及減少欄位數量

在手機或平板上,不像電腦可以閱讀大量資訊內容,所以要適當的縮減欄位數量及重要資訊內容
範例:電腦版有兩個區塊左邊是文字右邊是圖片,在手機版時,隱藏了左邊欄位,並將文字與圖片重疊
https://ithelp.ithome.com.tw/upload/images/20211013/20112053j0jelf28iW.jpg
圖片來源

改變排版方式

範例:像是選單,在電腦版會展開所有選單按鈕,在手機版時會將選單收起來,點擊漢堡選單才會展開選單內容
https://ithelp.ithome.com.tw/upload/images/20211013/20112053QcF68UkjJf.jpg
圖片來源

字體大小及間距要縮小

因手機螢幕很小,適當將距離、留白及文字縮小,提高閱讀可讀性
範例:在手機版時,會修改文字大小、間距及排版
https://ithelp.ithome.com.tw/upload/images/20211013/20112053DfaROipAvE.jpg
圖片來源

以觸控螢幕為出發點

電腦是使用滑鼠,按鈕或連結不需要很大的範圍,但在行動裝置上的點擊是手指頭,所以在按鍵或連結要有適當的間距,才容易被點擊或是誤點的問題
Google與Apple制訂的設計規範,建議觸控區域最小尺寸為 44px,像是社群平台instagram 下方bar的按鈕,高度就是在44px,寬度欄位平均分配
https://ithelp.ithome.com.tw/upload/images/20211013/20112053Jq5Hi5TUBh.png

移除 safari input select預設樣式

在safari表單元件添加了各種預設樣式,有時候改了樣式,在safari都不會有效果,因此使用appearance的樣式可以移除系統預設樣式。

select{
	/*移除預設樣式*/
	-webkit-appearance: none;  /* Safari 和 Chrome,常用於iOS下移除內建樣式 */
  -moz-appearance: none;     /* FireFox */
  appearance: none;
}

https://ithelp.ithome.com.tw/upload/images/20211013/20112053DFymejXzfy.png
移除後,下拉選單的箭頭就不見,可以透過樣式添加自己想要的下拉選單箭頭

<select class="form-control">
  <option>2021/09</option>
  <option>2021/10</option>
</select>
select {
  width: 130px;
  padding:5px 25px 5px 8px;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 0.25rem;
  border-radius: 8px;
  border: 1px solid #ff786e;
	line-height: 1;
	/*將預設的select選擇框樣式清除*/
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
	/*箭頭樣式及箭頭位置*/
  background: url(img/arr.png) no-repeat scroll 96% center #fff;
  background-size: 13px 8px;
  outline: 0;
}

https://ithelp.ithome.com.tw/upload/images/20211005/20112053xwxDC8Wsse.png

點擊Input輸入框畫面放大

當使用行動裝置時,點擊輸入框時畫面被放大,解決方式有以下兩種方法

使用meta tag 禁止畫面縮放

<head>設定,但使用這方法連畫面縮放功能也被禁止了

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

CSS 設定

使用此方法還能保留畫面的縮放功能

input, textarea {
	font-size: initial;
}

另外google也提供PageSpeed Insights為你的網站打分數,給予改善的建議
以上是製作響應式網站需要注意的細節,希望對你在製作上能提供更好的設計與體驗給使用者

參考網站:
https://www.astralweb.com.tw/stop-zoom-in-on-input-focus-on-mobile-devices/


上一篇
製作響應式網站-30天學會HTML+CSS,製作精美網站
下一篇
網頁框架比一比-30天學會HTML+CSS,製作精美網站
系列文
30天學會HTML+CSS,製作精美網站30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-14 12:13:18

恭喜即將邁入完賽~/images/emoticon/emoticon08.gif

我要留言

立即登入留言