解決HTML5手機(jī)端頁面縮放的問題
我要評論通常在寫HTML5手機(jī)端頁面的時(shí)候，我們會發(fā)現(xiàn)頁面所顯示元素的比例不正確，那此時(shí)我們需要添加的就是：
<meta name="viewport" content="width=device-width,initial-scale=1">
或者是
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
那么我們來對這句話解釋一下就是：
viewport ： 表示的是顯示窗口；
width=device-width,initial-scale=1.0 ： 表示的是顯示窗口的寬度等于設(shè)備的屏幕寬度，initial-scale=1.0，即初始的縮放比例為1.0；
minimum-scale ： 表示的是允許縮放的最小比例
maximum ： 表示的是允許縮放的最大比例
user-scalable ： 表示是否允許用戶進(jìn)行頁面的縮放，值可以為yes或者no
實(shí)例問題情況：
現(xiàn)象：
當(dāng)用戶在手機(jī)端頁面當(dāng)中點(diǎn)擊input輸入框進(jìn)行文本的編輯時(shí)，頁面會自動(dòng)的被放大
解決：
在頁面的頭部<head>標(biāo)簽中插入
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
或者是不允許用戶縮放頁面 user-scalable=no
總結(jié)
以上所述是小編給大家介紹的解決HTML5手機(jī)端頁面縮放的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
HTML5實(shí)現(xiàn)可縮放時(shí)鐘代碼
本文通過實(shí)例代碼給大家介紹了基于html5實(shí)現(xiàn)的可縮放時(shí)鐘代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-28
可使任何HTML元素動(dòng)態(tài)縮放適合父元素的js插件scalable.js
scalable是一個(gè)可以使任何HTML元素動(dòng)態(tài)縮放適合父元素的js插件。在頁面縮放時(shí)，大小始終適合其父容器大小，非常實(shí)用，歡迎下載2017-08-14Html5之svg可縮放矢量圖形_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了Html5之svg可縮放矢量圖形的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-17
HTML5全屏響應(yīng)式縮放切換幻燈片代碼是一款切換的時(shí)候當(dāng)前slide會平滑縮小并移動(dòng)，下一個(gè)slide會從縮小狀態(tài)逐漸放大并移動(dòng)到屏幕中間，效果不錯(cuò)。需要的朋友前來下載源碼哦2016-05-10用HTML5實(shí)現(xiàn)鼠標(biāo)滾輪事件放大縮小圖片的功能
這篇文章主要介紹了用HTML5實(shí)現(xiàn)鼠標(biāo)滾輪事件放大縮小圖片的功能,其中Safari瀏覽器用戶要注意是否禁用了鼠標(biāo)滾動(dòng)控制頁面滑動(dòng)的功能,需要的朋友可以參考下2015-06-25
HTML5基于SVG實(shí)現(xiàn)可拖拽和縮放的世界地圖效果源碼
今天要分享的這款HTML5地圖應(yīng)用是一張世界地圖，地圖元素是使用SVG繪制的，并且地圖可以拖拽和局部縮放，效果非常不錯(cuò)2015-01-23HTML5之SVG 2D入門1—SVG(可縮放矢量圖形)概述
可縮放矢量圖形(Scalable Vector Graphics，簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴(yán)格遵從XML語法),SVG 功能集包括嵌套轉(zhuǎn)換、剪切路徑、alpha 蒙板和模板對象,感2013-01-30- 本文通過一段代碼給大家介紹了HTML5添加禁止縮放功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-11-03
