解决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使用多列制作瀑布流
May 10 HTML / CSS
CSS3 开发工具收集
Apr 17 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python实现Virginia无密钥解密
2019/03/20 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
以下的初始化有什么区别
2013/12/16 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
商业融资计划书
2014/04/29 职场文书
学校欢迎标语
2014/06/18 职场文书
公证委托书标准格式
2014/09/11 职场文书
党员个人党性分析材料
2014/12/18 职场文书
顶岗实习协议书
2015/01/29 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫