iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 28
1
Modern Web

CSS 實戰心法系列 第 28

實戰小技巧 - iOS 表單的使用者體驗優化

  • 分享至 

  • xImage
  •  

最後幾篇再來額外介紹一些小技巧,這些小技巧都是非常冷門的卻是實用的手法,分享給大家參考看看。

先前有一位朋友詢問到 iOS 表單有個小問題讓他困擾,就是用戶在點擊的時候,畫面都會略微的放大,這會讓用戶在填寫表單的時候非常的不順手,狀況如下:

這種強制放大一個不明白的尺寸,實在是非常的惱人,尤其是在畫面這麼小的情況下。於是這位朋友希望可以做一些調整,讓用戶在點擊的時候直接放到全螢幕,這樣在正常全螢幕的情況下點擊就不會有縮放的感覺;如果是放大看的用戶,也是一率拉滿全屏。成果如下:

用戶在點擊時,只會有些微的位移。

CSS 修正

以上的解法,我一開始以為是使用 Javascript,透過各種方式解析,其實只要做一點點調整就可以了,就是將 input 的文字大小設定超過 16px (完),那麼在點擊的時候就直接拉滿全屏,以下範例可用 iOS 手機點點看。

範例可看:https://wcc723.github.io/css/2016/12/28/ios-input/

.autofullscreen {
  input, select, textarea, button {
    font-size: 16px;
  }
}

結果如上,只要調整 CSS 就能大幅改善使用者體驗。


上一篇
CSS 框架自幹心得 - 失敗三次的框架建構經驗
下一篇
CSS 實戰小技巧 - 不使用 important 的高優先值技巧
系列文
CSS 實戰心法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言