通常在写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. albus就是要第一个出场(线性基)

    传送门 这个题题目描述真怪异--就不能说人话吗-- 人话:给定长为n的序列A,定义f(s)为集合s内所有元素异或值,求A的所有子集的f值从小到大排列后,q在其中第一次出现的下标对10086取模的值. ...

  2. bzoj 2836 魔法树——树链剖分

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2836 树剖裸题.然而WA.RE了好久…… 原来是跳 top 的那个地方! top 不相等的时 ...

  3. POJ2274(后缀数组应用)

    Long Long Message Time Limit: 4000MS   Memory Limit: 131072K Total Submissions: 25272   Accepted: 10 ...

  4. AngularJS系统学习之Factory，Service， Provider（工厂，服务，供应者）

    本文转自:http://blog.csdn.net/zcl_love_wx/article/details/51404390 我看过敲过代码之后, 有了很深的理解, 这三个东西其实都是用来返回对象的. ...

  5. 使用 NSData 分类实现，对 NSData 数据类型进行 AES 加密

    一般对NSData的数据类型进行加密,这里就将 .h .m 文件分享出来,有需要的可以直接粘贴使用.     下面是 .h 文件   #import <Foundation/Foundation ...

  6. html5代码如何转成小程序代码

    插件源码 链接:https://pan.baidu.com/s/1pGY8ZsdESaQGEzoEgpb_Rw 提取码:s1ix  放到与pages文件夹同级目录下 js中调用 //引入 var wx ...

  7. （水题）洛谷 - P2439 - 阶梯教室设备利用 - 简单dp

    https://www.luogu.org/fe/problem/P2439 很明显时间是一个维度,按照时间顺序决策就行了. dp[i]表示以时间i为结尾所能达到的最长演讲时间. #include & ...

  8. lightoj1087 【线段树】

    题意: 给你n个数,然后给你q个询问,有两种询问: a: 表示在右边插入一个数 c:表示从左边拿出一个数,然后输出: 思路: 一开始在想,自己手上的黑科技:线段树和树状数组 线段树上的操作: 求区间最 ...

  9. 如何实现一个无边框Form的移动和改变大小（一）

    很多时候我们不希望使用Windows提供的窗体. 我们希望使用一个无边框的窗体,什么border,caption透明就行了. 下面我们来说下一些实现方法. 这个方法要求窗体自定义的border siz ...

  10. [SDOI2019] 热闹又尴尬的聚会

    热闹度\(p\)子图中最小的度数,尴尬度\(q\)独立集大小,之间的约束 \[ \begin{aligned} \lfloor n/(p+1)\rfloor\le q &\rightarrow ...