如何解决移动端H5页面点击输入框页面放大的问题

于 2017-12-29 09:36:54 发布 10122 收藏 3
分类专栏： html 文章标签： 移动 点击输入框页面放大
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzh254052917/article/details/78928234
版权

在头部<head></head>中加入一行即可： 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

一定要在开始做的时候就加上这个再调样式！否则先调好样式之后再来加会导致所有要样式比例改变，我就是吃了这个亏 ，全部样式得重调简直恶心，不过还好之前我用的百分比，差别大的地方是字体像素的大小，改好之后就再点击输入框就不会出现界面缩放的情况了
丶Hzh
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue的select，input点击后放大问题
Fashion_Barry的博客
05-29 448
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes,
iOS移动端点击input框页面放大问题
小破孩的博客
11-26 7171
问题： 今天在手机测试项目的时候，iOS点击input输入框页面会放大，造成很差的体验 解决办法： 在页面添加如下代码即可： &lt;meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt; ...
阻止input输入文字时页面视图放大
u013994400的博客
11-16 158
在页面head中加入 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 限制页面最大最小缩放为1。可以阻止input输入文字时页面视图放大
fileinput插件-图片放大功能点击没效果
vvvjack7的博客
04-24 409
今天在做项目时发现fileinput插件的放大功能点击没反应 刚开始以为插件太旧了，就疯狂换。。。。把官网的demo粘贴过来还是没反应。demo地址 之后观察到了一个现象，就是点击放大后，页面上线不能上下滑动，推测是已经弹出窗了，但是没显示出来，然后将body的z-index值调小，弹窗就出现了！！！ ...
android h5 禁止缩放,vue h5移动端禁止缩放代码
weixin_34026997的博客
05-28 203
vue h5移动端禁止缩放代码安卓在index.html里面写ios在APP.vue里面写window.onload = function() {document.addEventListener('touchstart', function(event) {if (event.touches.length > 1) {event.preventDefault()}})document.ad...
html的input标签，设置size后会影响到页面的放大缩小排版
u010523770的专栏
06-30 4378
通过jsp：include引入的页面，页面缩小后，排版混乱。 原来是因为，我的“添加采购备注”这个input标签设置了size="205"，导致，这个文本框使用有固定的大小，不能缩放。 解决办法，就是去掉size="205"这个input标签的属性，页面缩放就正常了。
uniapp生成的h5页面禁止浏览器上缩放页面
最新发布
weixin_45463061的博客
09-18 395
uniapp生成的h5页面禁止浏览器上缩放页面
vue2 移动配置 meta 的 viewport 控制移动端屏幕自适应的方法
完备创新
04-14 1886
问题描述： 在移动端开发时，遇到需要设置移动端自适应全屏的时候，发现这个功能，和普通的HTML不一样，不是每个页面都有这个配置后，网上进行百度了一圈发现没有类似的标题的文章，可能每个人的理解不一样吧，哈哈，这个算是融合之前比较简单的方法，其实还有很多方法。 欢迎给出建议和意见完善文章，让更多人的不走弯路。 方法一（比较简单）： 1.找到vue目录下的index.html文件，进行修改，如下图 代码如下： <meta name="viewport"...
vue h5 在安卓手机端input获得焦点后软键盘弹出顶起页面和fixed问题
我总是词不达意的博客
05-25 2285
vue h5 在安卓手机端软键盘弹出顶起页面和fixed问题
H5页面iphone(苹果)手机点击输入框输入内容时页面自动放大
码农键盘上的梦
03-23 2469
H5页面苹果手机点击输入框输入内容时 页面自动放大
移动端页面-点击input输入框禁止放大效果
JiAyInNnNnN123的博客
07-12 1935
点击input输入框会获取焦点并且放大 解决方法： 在项目根目录找到 index.html <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
关于html在webview中input框点选放大问题
weixin_33686714的博客
08-05 258
关于html在webview中input框点选放大问题 可能是选择的开发平台中webview中的问题，html在webview中input框点选，界面放大后input失去焦点后页面无法缩小。导致了整个界面的大小被放大~~~~~~~~ 由于界面使用大小的自适应这一问题导致整个界面在设备端无法正常显示。苦苦寻觅了好久终于找的了我个人html5导致这种问题的原因...
12个前端必会 H5 问题及解决方法
画漫画的程序员∙苏南
04-03 159
点击上方“IT平头哥联盟”，选择“置顶或者星标”你的关注意义重大！作者：suoyuesmile链接：https://github.com/suoyuesmile/suo-blog/blob...
关于手机端点击HTML input输入框页面放大的问题解决放法
qq_40886900的博客
07-13 3038
&lt;script&gt; if(/Android (\d+\.\d+)/.test(navigator.userAgent)){ var version = parseFloat(RegExp.$1); if(version&gt;2.3){ var phoneScale = parseInt(window.screen.width)/230; ...
IOS移动端，表单input聚焦时页面放大的解决办法
祈澈菇凉
06-10 1859
前言在移动端开发项目中，发现页面在使用 iPhone 访问的时候，点击 input 和 textarea 等文本输入框聚焦 focus() 时，页面会整体放大，而且失去焦点之后页面不能返回原来的样子。手指双击页面时候也会放大检查了下，功能上没有什么大问题，但是页面会整体放大，而且失去焦点之后页面不能返回原来的样子。用户体验不好最后找到原因：苹果觉得点击输入框放大是一个“很...
h5封装去底部_常用的H5动效制作方法
weixin_39612733的博客
11-24 125
· 动效制作手法一：GIFGIF图片是擅长制作细节的小动画，位图，优势在于 “体型”很小，可压缩，制作成本低。它以图片的形态存在，适用于各种操作系统，无兼容性的后顾之忧。缺点是压缩后失真率高，动画是定型不可操控的。制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GIF格式等等。大量的微信图文内的动图就是GIF来实现的。GIF动画...
h5点击图片自动放大_手把手教你做秋季招生H5，真的不南了
weixin_39796868的博客
12-21 1119
我们以舞蹈兴趣班招生为例，来教大家如何制作招生宣传的H5。一、场景制作思路与规划招生的主要受众人群：80、90后的新生父母早教兴趣班的小朋友年龄较小，不具备决策能力，主要是父母帮助选择判断，所以在制作H5宣传时，我们应该多从父母层面考虑他们的关注点。几个常见的问题：1.孩子安全问题；2.师资；3.教学成果；4.教学与同行的差异化；5.学费价格(不建议将价格直接放在作品中)；6.交通是否便...
解决网站在移动端点击输入框时页面自动放大的问题
raingoal的博客
03-27 1418
解决网站在移动端点击输入框时页面自动放大的问题 今天在进行网站开发时，使用vue的组件库elementui进行开发时，发现在移动端点击输入框时，页面会自动放大，影响页面的布局 经过测试，在index.html的head头部标签里加入这段代码即可禁止移动端页面的缩放 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> ...
HTML5 实例：旋转同时放大缩小的方块（canvas）
Alice_Lee_Lee的博客
08-20 273
使用 canvas 变换 + 定时器来实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
手机浏览器点击input，textarea页面放大，导致页面左右可移动问题
Cherries_h的博客
05-31 4809
android上面的浏览器，点击网页上的文本输入框()的时候，会自动把网页放大,

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题：编程工作室 设计师：CSDN官方博客 返回首页
评论 2

打赏作者

丶Hzh

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值