解决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制作日历实现代码
Jan 21 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 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中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
详解python中__name__的意义以及作用
2019/08/07 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
铭万公司.net面试题笔试题
2014/07/20 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
销售人员求职信
2014/07/22 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
解析redis hash应用场景和常用命令
2021/08/04 Redis