解决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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 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中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python之super的使用小结
2018/08/13 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
python speech模块的使用方法
2020/09/09 Python
python利用faker库批量生成测试数据
2020/10/15 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
大学生怎样写好自荐信
2014/02/25 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
人力资源部工作计划
2019/05/14 职场文书