大赢家幸运赛车直播
DEDECMS 模板中心

您現在的位置:主頁 > 織夢大學 > 站長手記 >

html5手機端頁面縮放問題的解決詳解

來源: 編輯: 發布時間:2019-11-07熱度:
通常在寫HTML5手機端頁面的時候,我們會發現頁面所顯示元素的比例不正確,那此時我們需要添加的就是: meta name=viewport content=width=device-width,initial-scale=1 或者是 meta name=viewport content=w...
通常在寫HTML5手機端頁面的時候,我們會發現頁面所顯示元素的比例不正確,那此時我們需要添加的就是:
<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 : 表示的是顯示窗口的寬度等于設備的屏幕寬度,initial-scale=1.0,即初始的縮放比例為1.0;

minimum-scale : 表示的是允許縮放的最小比例

maximum : 表示的是允許縮放的最大比例

user-scalable : 表示是否允許用戶進行頁面的縮放,值可以為yes或者no

實例問題情況:

現象:

當用戶在手機端頁面當中點擊input輸入框進行文本的編輯時,頁面會自動的被放大

解決:

在頁面的頭部<head>標簽中插入

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

或者是不允許用戶縮放頁面 user-scalable=no

DedeCMS問題解決

請點擊在線聯系我們【點擊咨詢解決問題】   如果您有任何織夢問題,我們將免費為您寫解決教程!

用心認真寫教程不易,請小打賞我們一下,多少是心意,解決問題是重點

【打賞說明】 如果您認為在本站中看的內容質量不錯、或閱讀后有所收獲、或解決您遇到的實際問題,那不妨小金額的贊助一下尚禹科技,讓尚禹科技有動力繼續寫出更多高質量的教程和心得。以幫助更多的人。[查看打賞記錄]

    尚禹科技:承接仿站業務,價格200元起!
    ?
    大赢家幸运赛车直播 亨克vs那不勒斯比分推荐 日本女优性交片 济南沐足按摩椅 江西快三 竞彩足球比分推荐 广西快乐双彩开奖查 快播播放日本av片 中国体彩7位数开奖结果查询表 佐佐木希有下过海吗 北京11选5走势一 未成年禁止的黄色片 上海11选5在线开 免费快播a片 澳洲幸运10免费计划网页 成 人 在 线 网 微乐辽宁麻将iphone