关于HTML5手机端页面缩放的问题
通常在写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手机端页面缩放的问题的更多相关文章
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
- rem手机端页面自适应完美解决方案(最新)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
- html5手机端播放音效不卡的方法
html5手机端播放音效不卡的方法线下载http://wxserver.knowway.cn/solosea/js/audioEngine.js 这个是性能不错 然后直接播放音效就可以了 audioE ...
- 【web前端】移动端控制台插件,手机端页面查看相关页面控制台信息
一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...
- HTML5手机端拍照上传
1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...
- PC端页面转换成手机端页面的分辨率问题的理解
PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上 通常是 750px -> 100vw / ...
- H5页面手机端禁止缩放的正确方式
H5页面禁止手机端缩放是个常见问题了 首先说meta方式 <meta content="width=device-width, initial-scale=1.0, maximum-s ...
随机推荐
- Makefile的常用技术总结
一.MAKE中的自动变量: $@: 表示target的名字 $%: 仅当目标是函数库文件中,表示规则中的目标成员名.例如,如果一个目标是"foo.a(bar.o)",那 ...
- 用libtommath实现RSA算法
RSA算法描述: 1) 选择两个大素数 p.q, 计算 n = p*q; 2) 产生 e, d 使: e*d = 1mod(p-1)(q-1) e 与 (p-1)(q-1) 互质 [公钥] e.n [ ...
- Subsets Forming Perfect Squares
题意: 给出n个数字,选出若干个数字,使得这些数字的乘积是一个完全平方数,问有多少种选法. 解法: 考虑异或方程组,$x_i$表示第i个数字是否选, 注意到只要保证结果中各个质因数都出现偶数次就可保证 ...
- 黑科技抢先尝 - Windows全新终端初体验(附无需编译就能安装的Preview版本及代码Build全过程)
目录 将Window 10 升级到1903版本 安装好git, 从github上clone代码 安装 VS 2019 和 .NET core 3.0 SDK 重定解决方案目标 设置好编译平台和启动的项 ...
- 洛谷 - P1891 - 疯狂LCM - 线性筛
另一道数据范围不一样的题:https://www.cnblogs.com/Yinku/p/10987912.html $F(n)=\sum\limits_{i=1}^{n} lcm(i,n) $ $\ ...
- Git之通过ssh clone代码
1.git平台:码云 2.服务器系统:Linux 1.在Linux中创建ssh公钥,将创建的公钥添加到码云的ssh公钥管理 2.一般来说我们配置完站点之后,都会生成一个站点对应的文件夹,进入文件夹,然 ...
- 受保护的封装 protected
补充内容:封装 私有化封装 private受保护的封装 protected公共的封装 public 注意:python目前不支持设定受保护的成员,但是开发者由约定的使用方式 受保护的封装:在成员名称前 ...
- ZK的选举算法
一.前言 前面学习了Zookeeper服务端的相关细节,其中对于集群启动而言,很重要的一部分就是Leader选举,接着就开始深入学习Leader选举. 二.Leader选举 2.1 Leader选举概 ...
- c3p0连接池下载
- Markdown - 如何使用上标、下标
解决方法 Markdown可以和HTML的语法兼容,可以通过HTML的上标和下标标签来实现效果: 标签 写法 效果 上标 2<sup>10</sup> 210 下标 H< ...