通常在写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. eclipse 切换数据库

    PS:jdbc.url = 后面的路径就是连接的数据库,如果需要连接开发库(dev_cfin),则只需要将tg_cfin 换成 dev_cfin,重启后台即可.

  2. shell函数（调用、返回值，返回值获取）

    Shell函数返回值,常用的两种方式:return,echo 1) return 语句shell函数的返回值,可以和其他语言的返回值一样,通过return语句返回.示例1: [devadmin@swa ...

  3. python逼格提升

    1.合并可以匹配的条件 s1 = 7 if s1 > 5 and s1 < 10: print(s1) s1 = 7 if 5 < s1 < 10: print(s1) 2.i ...

  4. c语言里如何调用汇编里的变量？

    c语言里如何调用汇编里的变量? 汇编语言:是声明全局变量 .globl _end_ofs _end_ofs: .word _end - _start c语言:声明这个变量,然后再调用这个变量 void ...

  5. CS231n 2016 通关 第五、六章 Batch Normalization 作业

    BN层在实际中应用广泛. 上一次总结了使得训练变得简单的方法,比如SGD+momentum RMSProp Adam,BN是另外的方法. cell 1 依旧是初始化设置 cell 2 读取cifar- ...

  6. UVaLive 3635 Pie (二分)

    题意:有f+1个人来分n个圆形派,每个人得到的必须是一个整块,并且是面积一样,问你面积是多少. 析:二分这个面积即可,小了就多余了,多了就不够分,很简单就能判断. 代码如下: #pragma comm ...

  7. UVa 242 Stamps and Envelope Size (无限背包，DP)

    题意:信封上最多贴S张邮票.有N个邮票集合,每个集合有不同的面值.问哪个集合的最大连续邮资最 大,输出最大连续邮资和集合元素. 最大连续邮资是用S张以内邮票面值凑1,2,3...到n+1凑不出来了,最 ...

  8. win10系统，mysql-installer-community-5.7.19.0.msi安装

    1.进入官网找到自己所需的安装包:https://dev.mysql.com/  ,路径:DOWNLOAD-->MYSQL Community Edition(GRL)-->MYSQL o ...

  9. （Android）截图批处理

    新建一个批处理文件 输入下面的内容 @echo off rem set name=%,%%,%%,%%,%%,%%,% //设置截图文件名称 set screenShotName=%,%%,%%,% ...

  10. phpStrom/webstrom如何修改Terminal命令行的字体大小

    phpstrom.webstrom中有个Terminal窗口效果就是打开cmd.exe,利用它就不用打开本地cmd命令行了. 默认的Terminal字体很大,如何修改呢? 1.Color Scheme ...