前端开发微信公众号在ios中常遇见的问题和解决方法

1，

问题：ios手机输入框获得焦点，软键盘弹出，当其消失后，ios页面底部会被弹出来一大片

空白，

此时，页面整个卡住，点击其他功能不生效。

而且输入框离底部越近，ios页面底部被弹出来的空白区域越大，不仅样式上别扭，而且页面功

能无法正常运行

解决方法：

目前试过来最佳方法是输入框获取焦点时，给页面最外层盒子一个margin-bottom值500px左

右，失去焦点后再还原

代码：

//判断是否时苹果手机
var str = navigator.userAgent.toLowerCase();
var ver = str.match(/cpu iphone os (.*?) like mac os/);
//是苹果手机
if(ver) {//获取焦点，软键盘弹出        $('input').focus(function() {//设定一个较大的值，input距离底部越近，值要设置的越大，一般500px到800px左右足够了           $('.main').css('margin-bottom','500px');          })  //失去焦点      $('input').blur(function() {//还原为初始值              $('.main').css('margin-bottom','0');          })
}复制代码

2，

问题：将输入框作为按钮元素的情况下，点击时弹出弹窗，此时并不需要其手动输入功能

方式：给输入框标签添加readonly属性，在大部分ios手机上点击输入框后都不会出现焦点，但

是点击iphone7手机上的输入框依然会有焦点存在，并且神奇的是，弹窗出现后焦点会在弹窗

上出现

解决：可以将readonly改为disabled属性，此时需要添加一个父级元素作为按钮，不然会点击

无效，并且注意修改输入框背景颜色和字体颜色

//修改placeholder的显示
input[disabled]::-webkit-input-placeholder {-webkit-text-fill-color: #999;
}
//修改value值的显示
input[disabled]{background-color:transparent;-webkit-text-fill-color: #999;
}
复制代码

3，

问题：页面弹出弹窗，若无特殊设置的情况下页面依然可以滑动，弹窗上若有输入框存在，在

iphone7手机上点击弹窗上的输入框后，此时弹窗上的焦点会不稳定，到处乱跑，

解决：弹窗出现时，将页面固定住，不让滑动；

禁止页面滚动方法（同时适用于安卓和ios手机）：

//页面滚动与不能滚动
function onHandler(event) {event.preventDefault();
}
//不让页面滚动
function noScroll() {$('html,body').css({'overflow':'hidden','height':'100%'});document.addEventListener('touchmove',onHandler,false);
}
//恢复滚动
function getScroll() {$('html,body').css('overflow','inherit');document.removeEventListener('touchmove',onHandler,false);
}复制代码

转载于:https://juejin.im/post/5cc806f0e51d456e80351739

前端开发微信公众号在ios中常遇见的问题和解决方法相关推荐

前端开发微信公众号本地调试
nginx实现本地调试微信公众号线上配置域名前言步骤一. nginx安装二. 修改本地host文件三. 配置nginx 四. 修改vue项目配置五. 修改微信公众号授权打开的链接地址路径 ...
前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
前端对接微信公众号网页开发流程，授权对接
前面讲到前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接. 一.引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx. ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...
教你如何用node.js开发微信公众号（一）
内容简介本文章简单介绍了如何用node.js开发微信公众号.主要内容包括微信公众平台的配置,signature的验证,以及用node.js去处理用户主动发起的行为. 准备工作开发前需要安装好nod ...
vue开发微信公众号订阅消息踩坑记录
今天做了一个微信公众号的网页开发, 使用的是vue做的开发,没错,就是微信公众号的开发,这都2021年了, 还有人有开发微信公众号的需求,我也是晕了, 微信公众号是我开发中感觉,最难调试的开发工作,没 ...
vue开发微信公众号之文件下载
开发微信公众号实现文件下载的时候问题就出现了,一般网站做法就用不了,因为微信内置浏览器不支持下载文件,这就需要你用外部浏览器了(一般都是用手机自带的浏览器). 这边你需要新建一个中转页面,提醒用户要通 ...
❤️十分钟快速学会使用Nodejs全栈开发微信公众号【建议收藏】
一.准备注册微信订阅号注册小程序测试号 sunny-ngrok工具安装及注册账号注意:sunny-ngrok的原型是ngrok,不过ngrok是国外的,sunny-ngrok是国内的一个私服,速 ...
手把手教你如何使用NodeJs和JavaScript开发微信公众号
大家作为前端可能活多或少的都写过结合微信jsdk开发的微信h5网页,对授权登录这块以及部分sdk可能都有通过后台接口来调用,那么大家有没有想过,这些后台接口都是怎么写的呢?那么今天这篇文章就带大家来了 ...

前端开发微信公众号在ios中常遇见的问题和解决方法

前端开发微信公众号在ios中常遇见的问题和解决方法相关推荐

最新文章

热门文章