解决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选择器的使用方法汇总
Nov 24 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
Yii2单元测试用法示例
2016/11/12 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
python简单的函数定义和用法实例
2015/05/07 Python
理解Python垃圾回收机制
2016/02/12 Python
python微信公众号之关键词自动回复
2018/06/15 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
Python中logger日志模块详解
2020/08/04 Python
Python如何使用input函数获取输入
2020/08/06 Python
英国电气世界:Electrical World
2019/09/08 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
新郎婚宴答谢词
2014/01/19 职场文书
推荐信模板
2014/05/09 职场文书
捐资助学感谢信
2015/01/21 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python