「睿思设计」深圳网站建设-网站设计制作公司-小程序开发

Internet Develppment互联网开发&设计服务提供商

SEARCH

与我们合作

我们专注:网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务:网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案

有一个品牌项目想和我们谈谈吗?

您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话,让我们听到您的声音

您也可通过下列途径与我们取得联系:

地 址: 深圳市南山区大冲国际中心12楼

电 话: 15989169178

微 信: 15989169178

邮 箱: idea@runideas.com

网 址: http://www.runideas.cn

快速提交您的需求 ↓

看不清?请点击我

关于HTML5手机端页面缩放的问题

发布日期:2017-10-31  浏览次数:2027  关键词:广州网站建设 广州网站建设公司

关于HTML5手机端页面缩放的问题

通常在写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


GO 欣赏案例
查看经典案例

TOP

QQ客服

电话咨询

QQ客服 微信咨询 电话咨询
在线咨询
 
重要的事情,电话里聊

接通客服

不方便的时候线上咨询,在线等哦