解决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 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 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编码规范的深入探讨
2013/06/06 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python Property属性的2种用法
2015/06/21 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
详解Django中异步任务之django-celery
2020/11/05 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
实习单位推荐信范文
2013/11/27 职场文书
大学生自我鉴定书
2014/03/24 职场文书
小学生评语大全
2014/04/18 职场文书
集体生日活动方案
2014/08/18 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
给老师的感谢信
2015/01/20 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
Java8中Stream的一些神操作
2021/11/02 Java/Android