解决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 17 HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 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
php4的彩蛋
2006/10/09 PHP
php 抽象类的简单应用
2011/09/06 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python数据结构之图的实现方法
2015/07/08 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
python操作mysql代码总结
2018/06/01 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
python实现发送邮件
2021/03/02 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
初中三好学生事迹材料
2014/01/13 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年库房工作总结
2014/11/26 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
反腐倡廉观后感
2015/06/08 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
Python基础之进程详解
2021/05/21 Python
Python 数据可视化之Matplotlib详解
2021/11/02 Python