通常在写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. Js常见的六种报错

    EvalError: raised when an error occurs executing code in eval() EvalError:当一个错误发生在()执行的代码RangeError: ...

  2. 在WinDBG中查看调用栈的命令

    命令 ========== k k命令显示的是一定数量的栈帧, 其中帧的数量是由.kframes命令来控制的, 默认值是256. kp 5 显示调用栈中前5个函数以及他们的参数. kb 5 显示调用栈 ...

  3. POJ1741：Tree

    浅谈树分治:https://www.cnblogs.com/AKMer/p/10014803.html 题目传送门:http://poj.org/problem?id=1741 这是一道树分治的模板题 ...

  4. KVM虚拟机内无agent情况下的监控方法

    KVM虚拟机内无agent情况下的监控(ceilometer实现) 今天看到大家在群里讨论KVM虚拟机的监控问题,而且是要求VM内无agent情况下的监控.这方面确实没有深入研究,但尚有些openst ...

  5. python--numpy模块、spicy模块、 matplotlib模块

    一:numpy模块 ndarray:存储单一数据类型的多维数组 ufunc:能够对数组进行处理的函数(universal function object) #numpy 中arange用法,指定开始值 ...

  6. hdu-1597

    find the nth digit Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  7. 1.1- 1.2 hive入门

    一.hive是什么 由Facebook开源用于解决海量结构化日志的数据统计: Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射成一张表, 并提供类SQL查询功能: 构建在Had ...

  8. 关于Angular6版本升级和RXJS6新特性的讲解

    从Angular5升级到Angular6, angular6相比较于angular5 总体变化不大,但是在RXJS上面却有一些变动,不得不说,虽然很讨厌break update但是RXJS6的新特性对 ...

  9. HDU - 1715 - 大菲波数 - JAVA

    http://acm.hdu.edu.cn/showproblem.php?pid=1715 import java.io.*; import java.util.*; import java.mat ...

  10. 3D max模型导入unity 3D中注意事项

    一.单位,比例统一   在建模型前先设置好单位,在同一场景中会用到的模型的单位设置必须一样,模型与模型之间的比例要正确,和程序的导入单位一致,即便到程序需要缩放也可以统一调整缩放比例.统一单位为米. ...