解决HTML5手机端页面缩放的问题


Posted in HTML / CSS onOctober 27, 2017

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

总结

以上所述是小编给大家介绍的解决HTML5手机端页面缩放的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3学习心得分享
Aug 19 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 #HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 #HTML / CSS
html5清空画布方法(三种)
Oct 16 #HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 #HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 #HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 #HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 #HTML / CSS
You might like
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php按单词截取字符串的方法
2015/04/07 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
JavaScript Split()方法
2015/12/18 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
Python高效编程技巧
2013/01/07 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python读取并写入mat文件的方法
2019/07/12 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python接收手机短信的代码整理
2020/08/02 Python
关于python中remove的一些坑小结
2021/01/04 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
大学生入党思想汇报
2014/01/14 职场文书
《乡愁》教学反思
2014/02/18 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
社会工作专业自荐信
2014/09/26 职场文书
教师求职自荐信
2015/03/26 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
详解Python中下划线的5种含义
2021/07/15 Python