簡單究好 Simple is Best

網頁前端開發資訊

如何在行動裝置上避免點擊輸入框時畫面放大

當我們使用手機瀏覽網頁時,在預設的情況之下,點擊文字輸入框後,畫面會立即放大。如果不想要這個畫面放大的效果該怎麼做呢?
有二個作法可以拿掉這個效果。

一、使用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;
}

Post a comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *