行動裝置中 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 | 設定是否允許使用者改變縮放比例 |
| time | source | device | mode | operation | status |
|---|---|---|---|---|---|
| 2024/03/20/14:29:26 | 3 | 11 | 2 | ||
| 2024/03/20/14:29:30 | 3 | 1 | 1 | ||
| 2024/03/20/14:29:35 | 3 | 11 | 1 | ||
| 2024/03/20/14:29:36 | 3 | 11 | 2 | ||
| 2024/03/20/14:29:37 | 3 | 10 | 1 | ||
| 2024/03/20/14:29:38 | 3 | 10 | 2 | ||
| 2024/03/20/14:29:39 | 3 | 12 | 1 | ||
| 2024/03/20/14:29:40 | 3 | 12 | 2 | ||
| 2024/03/20/14:30:07 | 1 | 13 | 10 | 4 | |
| 2024/03/20/14:31:07 | 2 | ||||
| 2024/03/20/14:31:15 | 2 | 5 | 6 | ||
| 2024/03/20/14:31:24 | 1 | 1 | 2 | ||
| 2024/03/20/14:31:25 | 1 | 1 | 1 |