解决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 选择器 基本选择器介绍
Jan 21 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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 PDOStatement::rowCount讲解
2019/02/01 PHP
初学JavaScript第二章
2008/09/30 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
js选项卡的制作方法
2017/01/23 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python 链接和操作 memcache方法
2017/03/04 Python
在python中实现对list求和及求积
2018/11/14 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python如何调用java类
2020/07/05 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python如何急速下载第三方库详解
2020/11/02 Python
python中最小二乘法详细讲解
2021/02/19 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
小学红领巾中秋节广播稿
2014/01/13 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
交通事故协议书范本
2014/11/18 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
初中班长竞选稿
2015/11/20 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS