解决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动画效果抖动解决方法
Sep 03 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP实现下载功能的代码
2012/09/29 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Python控制台实现交互式环境执行
2020/06/09 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
就业协议书样本
2014/08/20 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书