解决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样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
css3应用示例:新增的选择器
Mar 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
php5 图片验证码实现代码
2009/12/11 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
从零学python系列之从文件读取和保存数据
2014/05/23 Python
python设置检查点简单实现代码
2014/07/01 Python
Python实现基本线性数据结构
2016/08/22 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python字符串循环左移
2019/03/08 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
Python logging模块handlers用法详解
2020/08/14 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
请说出以下代码输出什么
2013/08/30 面试题
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
Redis高并发缓存架构性能优化
2022/05/15 Redis