解决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中transform变换模型的渲染
May 27 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
javascript add event remove event
2008/04/07 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
详解AngularJS之$window窗口对象
2018/01/17 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
python redis存入字典序列化存储教程
2020/07/16 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
Java语言的优势
2015/01/10 面试题
初中军训感想
2015/08/07 职场文书
python中的None与NULL用法说明
2021/05/25 Python