創作內容

0 GP

【網頁設計】如何讓用戶點擊搜尋輸入框時,不要縮放網頁?

作者:吹著魔笛的浮士德│2023-01-26 13:57:19│巴幣:0│人氣:175

隨著 Google 越來越重視「網站使用體驗核心指標」,如何改善 CLS 等問題就讓人相當頭痛了。最近調整時發現在手機版上點擊「搜尋框」要輸入文字時,會被強制縮放,因此整理一下如何讓用戶如何在行動裝置上避免點擊輸入框時畫面放大的解法。不過中文圈似乎沒人討論這個問題(也可能是我沒搜到正確的提問),但外語圈倒是超多人希望能解決這個困擾。

How to Disable search box input zoom effect

雖然這個縮放功能是為了讓手機用戶能看清楚自己輸入了什麼文字,但為了改善分數,還是想盡量避免各種可能造成位移的問題發生。

總之目前找到的解法是在 <head> 裡放入以下這段設定即可:

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

這樣就能解決縮放問題,不過需要特別注意,這項改動會讓「無障礙分數」大幅下降,請自行評估。

Via


引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5648615
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 0 篇留言

我要留言提醒:您尚未登入,請先登入再留言

喜歡★h9856 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:日本虛擬偶像業界首創!B... 後一篇:「噠噠特攻 」禮包兌換碼...

追蹤私訊切換新版閱覽

作品資料夾

d88931122所有巴友
歡迎諸君來參觀老僧的小屋,內含Steam與Google Play遊戲、3D角色模組、Line貼圖看更多我要大聲說2小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】