Skip to main content

行動裝置中 input 一直 zoom

HTML meta tag 的功能是用來提供網頁資訊給瀏覽器、搜尋引擎了解,也就是說 meta tag 的內容並不會直接顯示在網頁上,meta tag 通常用於指定頁面描述、關鍵字、作者等等的資訊。而瀏覽者可以透過檢視原始碼看到 meta tag 的內容。

HTML5 引入了一種讓網頁設計師通過標籤控制用戶的 viewport (可見區域)的方法。viewport 隨著設備的不同而變化,而且在手機上比在電腦屏幕上更小。(如下)

如果你不想要你的 input 在寫入時,會一直 zoom in zoom out 的話,可以在 index.html 加上這段

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

Viewport 屬性說明

屬性說明
width設定畫面寬度
height設定畫面高度
initial-scale設定畫面的初始縮放比例
minimum-scale設定畫面的最小縮放比例
maximum-scale設定畫面的最大縮放比例
user-scalable設定是否允許使用者改變縮放比例

參考文章[1]

timesourcedevicemodeoperationstatus
2024/03/20/14:29:263112
2024/03/20/14:29:30311
2024/03/20/14:29:353111
2024/03/20/14:29:363112
2024/03/20/14:29:373101
2024/03/20/14:29:383102
2024/03/20/14:29:393121
2024/03/20/14:29:403122
2024/03/20/14:30:07113104
2024/03/20/14:31:072
2024/03/20/14:31:15256
2024/03/20/14:31:24112
2024/03/20/14:31:25111