解决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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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
咖啡语言
2021/03/03 咖啡文化
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
js玩一玩WSH吧
2007/02/23 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
物业管理员岗位职责范文
2013/11/25 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
自荐信的基本格式
2014/02/22 职场文书
十佳护士先进事迹
2014/05/08 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
python保存图片的四个常用方法
2022/02/28 Python