通常在写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手机端页面缩放的问题的更多相关文章

  1. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  2. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  3. rem手机端页面自适应完美解决方案（最新）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  5. html5手机端播放音效不卡的方法

    html5手机端播放音效不卡的方法线下载http://wxserver.knowway.cn/solosea/js/audioEngine.js 这个是性能不错 然后直接播放音效就可以了 audioE ...

  6. 【web前端】移动端控制台插件，手机端页面查看相关页面控制台信息

    一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...

  7. HTML5手机端拍照上传

    1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...

  8. PC端页面转换成手机端页面的分辨率问题的理解

    PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上 通常是 750px -> 100vw / ...

  9. H5页面手机端禁止缩放的正确方式

    H5页面禁止手机端缩放是个常见问题了 首先说meta方式 <meta content="width=device-width, initial-scale=1.0, maximum-s ...

随机推荐

  1. Android开发者的四大工具

    1. Basic4Android Basic4Android是Android平台上一个简单而又强大的可视化快速应用开发工具,它可被用来开发和测试数据库通信,甚至可以被用来开发2D的即时游戏! 主要特性 ...

  2. Gibonacci number-斐波那契数列

    Description In mathematical terms, the normal sequence F(n) of Fibonacci numbers is defined by the r ...

  3. Maven下org.junit.Test无法使用

    原文地址: https://blog.csdn.net/allenChenZhiMing/article/details/81412983 我在看Spring in action(第四版)的时候,看到 ...

  4. CSS3：CSS 听觉参考手册

    ylbtech-CSS3:CSS 听觉参考手册 1.返回顶部 1. 听觉样式表 听觉样式表可把语音合成与音响效果相组合,使用户可以听到信息,而无需进行阅读. 听觉呈现可用于: 视觉能力低弱的人士 帮助 ...

  5. 【225】ArcEngine 实现要素添加 & 删除

    参考:ArcGIS Engine效率探究——要素的添加和删除.属性的读取和更新 删除要素 //添加图层,显示在最上面 axMapControl1.AddShapeFile(@"D:\01-业 ...

  6. Game with Powers

    题意: 有1~n,n个数字,两个人轮流操作,每一次一个人可以拿一个数字$x$,之后$x, x^2, x^3....x^t$全都被删掉. 给定n,问最优策略下谁赢. 解法: 考虑SG函数,可以注意到题目 ...

  7. Paint Tree

    题意: 给定一棵n个点的树,给定平面上n个点,将n个点用线段连起来画成树的形状,使得不存在不在端点相交的线段,构造出一种情况. 解法: 首先观察我们常规画出来的树形图可知,树的子树是根据极角分开的,这 ...

  8. ESXI中 Linux虚拟机不重启扩展磁盘

    1.首先对虚拟机进行编辑设置 硬盘大小进行修改到80G: 2.在Linux系统中查看磁盘大小 此时并没有什么变化: 3. 上面没有变化的原因,是因为需要重新扫描存储设备的scsi总线: 找到scsi磁 ...

  9. monkeyRunner

    MonkeyRunner工具是使用Jython(使用Java编程语言实现的Python)写出来的,它提供了多个API,通过monkeyrunner API 可以写一个Python的程序来模拟操作控制A ...

  10. 给定一个数字n，生成n对可能的小括号组合

    示例: 输入:n为3 输出:[ "((()))", "(()())" "(())()", "()(())", " ...