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