解决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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
vue.js的提示组件
2017/03/02 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
github配置使用指南
2014/11/18 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python爬豆瓣电影实例
2018/02/23 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
《春雨》教学反思
2014/04/24 职场文书
信息管理专业自荐书
2014/06/05 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
离婚协议书的范本
2015/01/27 职场文书
学校食品安全责任书
2015/01/29 职场文书
《西门豹》教学反思
2016/02/23 职场文书
辞职申请书范本
2019/05/20 职场文书