移动端开发，IOS、iPhone，表单input元素获取焦点时页面被放大的解决办法。

最新推荐文章于 2024-07-29 09:02:00 发布
最新推荐文章于 2024-07-29 09:02:00 发布
阅读量8.4k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31164127/article/details/70742687
版权


在IOS测试的时候，每次input获取焦点都会使页面放大，下面是解决方法：


<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">


更全的meta标签详解，看最骚的就是你的总结吧


彩笔_小qing
关注
Vue iOS移动端点击input框页面放大问题 (正宗解决方案)
闫瑞锋的博客
07-22 2865
禁止页面拖动（设置viewport）、vue 开发H5，点击input之后，页面在iPhone上放大，移动端开发，IOS、iPhone，表单input元素获取焦点时页面被放大的解决办法 ``` 请先查看参考文献 ios 10以前 直接在根目录index.html中替换如下代码 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> io.
vue h5移动端Ios软键盘遮挡input输入框导致页面不能自动向上滚动的bug
闫瑞锋的博客
07-22 2024
关键代码 window.addEventListener('resize', function() { if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) { window.setTimeout(function() { if ('scrollIntoView' in document.activeElement
手机 input 获取焦点后 网页变大
创新艺术效率
01-14 2387
使用iphone Safari浏览网页，每当点击输入框的时候页面就被放大，起初一直以为是viewport的问题，后来发现是input的font-size设置的太小了，改成32px以上，就不放大了，具体原理不清楚。
在ios系统浏览器中输入框得到焦点时页面自动放大
暖一杯茶的博客
08-13 877
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Vue项目移动端h5页面在IOS上点击input输入文本框页面会自动放大的问题
最新发布
JackieDYH的博客
07-29 380
需要给 ios 和安卓 app 开发 h5 页面，在安卓上测试没有问题，但是 ios上点击输入框会导致页面缩放失败。
ios中获取input焦点放大页面
m0_61195004的博客
12-30 1708
1.<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,viewport-fit=cover, user-scalable=no" /> 2.设置input字体大小 font-size: 16px
ios 手机浏览器，点击输入框页面会放大
qq_17335549的博客
09-04 415
一个普通的h5静态页面，在ios手机上用浏览器打开，发现每次聚焦输入框的时候整个页面都会放大！解决办法在html的头部meta标签中设置 user-scalable=no。
4种表单按钮美化效果，包含勾选按钮，单选按钮，移动端仿iphone开关，开启和关闭滑块，兼容主流浏览器
05-23
本文将详细介绍四种表单按钮的美化效果，它们分别是勾选按钮、单选按钮、移动端仿iPhone开关以及开启和关闭的滑块，这些设计都充分考虑了与主流浏览器的兼容性。 1. 勾选按钮和单选按钮美化： 勾选按钮（Checkbox...
【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题
Weiqian_的博客
04-13 4176
IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题解决思路
常见的移动端H5页面开发遇到的坑和解决办法
qq_35859392的博客
04-17 885
转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的9...
ios应用源码之点击输入框弹出键盘时，输入框的整个视图向上移动以便用户可以看到输入的内
12-08
ios应用源码之点击输入框弹出键盘时，输入框的整个视图向上移动以便用户可以看到输入的内容
IOS移动端，表单input聚焦时页面放大的解决办法
祈澈菇凉
06-10 4423
前言在移动端开发项目中，发现页面在使用 iPhone 访问的时候，点击 input 和 textarea 等文本输入框聚焦 focus() 时，页面会整体放大，而且失去焦点之后页面不能返回原来的样子。手指双击页面时候也会放大检查了下，功能上没有什么大问题，但是页面会整体放大，而且失去焦点之后页面不能返回原来的样子。用户体验不好最后找到原因：苹果觉得点击输入框放大是一个“很...
ios html5 input 聚焦,解决 H5 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG...
weixin_33545930的博客
06-21 865
=================转载===================================：网上方法大多就只有 window.scrollTo(0, 0) ，会造成 input 失去焦点时就滚动到顶部了，这是不对的，并不是所有情况都要回顶部，于是自己写了个适用全部场景的解决方案，并且添加后，所有页面生效~在全局的入口页面(例：App.vue)加以下代码：(/iphone|ipod...
iso手机点击input框会放大，解决方案
qq_40088443的博客
05-15 2972
在用微信浏览器打开页面的时候，ISO手机出现了点击input框页面放大的效果，安卓没有发生。网上大部分的解决方案都是增加 <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" name="viewport"> ...
避免移动端页面focus输入框时自动放大页面的解决方法
码飞_CC的博客
03-30 7958
在网页适配移动端时遇到一个问题：本来页面打开是正常显示的，但是当你聚焦了textarea输入框的时候，页面自动放大了，破坏了原本正常的页面，这不是我们想要的，有什么方法解决呢？ 1. 设置meta标签 网上很多人提到使用如下方法： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-sca...
解决微信里H5页面键盘收起后webview不能自动下来问题
aihui5121的博客
09-05 795
解决方案：滚动下h5的body； var scrollbox = $('body'); var sheight = scrollbox.scrollTop(); scrollbox.scrollTop(sheight - 10); setTimeout(function(){ 　　scrollbox.scrollTop(sheight); },100) 　　 ...
网页聚焦时被键盘推上去下不来了
Pan Fengshan的博客
04-12 958
问题描述： 页面输入框聚焦时，网页被键盘推上去了，但是失去焦点时页面停在原地没有下来，在微信浏览器及搜狗浏览器都有这个问题，苹果自带的Safari浏览器没有这个问题 问题如下图 解决办法： 在输入框失去焦点的时候，将scrollTop设为0即可 document.body.scrollTop = 0; ...
ios键盘弹起导致h5页面变形问题
你的指尖，有改变世界的力量。
03-07 1618
参考博客： https://blog.csdn.net/asuno_1/article/details/73246280
IOS移动端，表单input聚焦时页面放大的问题解析以及解决办法
weixin_52633842的博客
12-04 3486
方法一 因为触发这个问题的本质是因为ios端 字体小于等于15px就会触发自动放大问题，所以直接修改字体为16px，然后把组件整体缩放。苹果觉得点击输入框放大是一个“很好”的体验，就擅自把页面给放大了，触发机制，IOS端input字体应大于15px，否则系统会自动触发聚焦放大。方法三 禁止手势触发，很多版本也说这个方法，亲测无效个人认为引发问题的原因是字体小于等于15px系统自发的放大，并非人为放大触发。方法二 使用mate标签强制禁止，安卓端有效，ios在10以后的版本中不接受mata标签。
精通iPhone iOS开发：实战秘籍
"iPhone IOS 开发 秘籍" 《iPhone开发者秘籍》是一本深受开发者好评的书籍，由Erica Sadun撰写，对于那些希望在iOS平台上进行应用开发的人来说，这是一份宝贵的资源。这本书深入浅出地介绍了iPhone应用开发的核心...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值