微信开发中,不同手机系统遇到的bug(不定时更新)
Ios系统
1、body上绑定click事件失效。
解决:body标签下面,用个div,当做包裹所有内容的大容器。给这个div,绑定click事件。
2、不支持 YYYY-MM-DD 的时间格式。
用new Date(YYYY-MM-DD) 时,在安卓手机上正常获取时间数据。在ios上就不行。
解决:改成 YYYY/MM/DD 的格式。用 .replace(/-/g, '/') 的方法。
3、使用vue开发时,有回退显示空白的现象
出现情景描述:列表页(多条数据)—— 滑到下面,点击某条数据,进入详情页 —— 点击详情页的微信自带返回按钮 —— 回到的列表页显示一片空白
解决: 在列表页的ajax成功回调中,获取数据后,加上如下代码:
this.$nextTick(()=>{
window.scrollTo(0,1);
window.scrollTo(0,0);
});
4、使用transform定位素材时,有时会丢失素材。
解决:给这个用transform定位的元素,它的父元素,加上 transform: perspective(1000); 的样式。
1000是自定义的值,具体 perspective 的用法,可以去 W3school 查一下。
5、动画有时不执行。
情景:给元素设置动画,但元素是依赖接口返回的数据生成的。点击页面链接刚进入这个页面,动画是不执行的。刷新也不执行。
解决:用 animation 定义动画的时候,设置延时执行。比如: animation: rotate1 3s .5s linear infinite ;
6、如何禁用微信浏览器的调整字体大小?(不属于bug,属于优化。)
body {
text-size-adjust: 100% !important;
-webkit-text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
7、tab栏固定定位在底部,iphoneX 的自带黑条遮挡tab栏内容。
第一步,下面这句中加入“viewport-fit=cover”
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
第二步,body和固定在底部的元素,加上如下样式:
比如 .tab 是固定在底部的元素。
@supports (bottom: env(safe-area-inset-bottom)) {
body, .tab {
padding-bottom: env(safe-area-inset-bottom);
}
}
加上@supports 的条件限制,是为了该样式仅对 iphoneX 生效。
详细了解,可以参考下面两篇文章:
https://www.cnblogs.com/lhb25/p/h5-web-app-adapt-to-iphonex.html
http://www.mamicode.com/info-detail-2147266.html
8、设置overflow:auto/scroll; 后,ios上滑动不流畅
解决办法:给设置overflow:auto/scroll;的元素,加上 -webkit-overflow-scrolling: touch; 的样式
Android系统
1、一加等手机,rem计算有误。
解决:封装的函数如下。将这个函数放到rem计算的函数中运行。
function modifyPx() {
var ele = document.documentElement;
if(!ele) return;
var standard_rem = Math.round(parseFloat(ele.style.fontSize));
var test_div = document.createElement('div');
test_div.style.width = '1rem';
test_div.style.height = '0';
document.body.appendChild(test_div);
var actual_rem = test_div.offsetWidth;
var rate = standard_rem / actual_rem;
if(rate != 1) {
document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + (parseFloat(htmlEle.style.fontSize) * rate) + "px !important");
}
document.body.removeChild(test_div);
}
原理:假设一个盒子,设置它的宽度是1rem。计算它的理想宽度(就是按照正常rem计算的结果),然后得到它在手机上的实际宽度。
将这两个数据作比较,一旦不同,就按照这两个数据的关系比例,重新设置根元素大小。
2、如何禁用微信浏览器的调整字体大小?(不属于bug,属于优化。)
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize); }
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
3、用 Vue+Webpack 开发的项目,安卓低版本上,无法正常显示和使用。
测试机:华为荣耀6 android 4.4.2
解决办法:
项目安装 babel-polyfill 、 es6-promise 、viewport-units-buggyfill 三个插件。(第三个插件的前提是项目中使用的适配单位是 vw)
在项目入口文件,比如main.js中,头部引入
import "babel-polyfill"
import 'es6-promise/auto'
还要调用 viewport-units-buggyfill
var hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({
hacks: hacks
});
解释: babel-polyfill 、 es6-promise 是解决低版本不识别 es6 新的 api
viewport-units-buggyfill 是解决低版本不识别 vw 单位。
补充:虽然项目里已经装了bable一些插件,但是只转换新语法,不转换新api。
其它问题
1、阻止浏览器的橡皮筋效果
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的下拉滑动的效果
}, {passive: false});
{passive: false} 必须加,否则ios无效
参考文章:https://segmentfault.com/a/1190000014134234
此外,经过测试(ios版本 11.4.1),页面中如果有按钮,在 safari浏览器中,快速点击会缩放页面。后来发现,把标签 button 改成 div 的方式。就不会这样了。
页面前提,在viewport的meta中设置了 user-scalable=no
微信开发中,不同手机系统遇到的bug(不定时更新)的更多相关文章
- 有关微信开发中errorcode:-1 errmsg:system error 错误的一点原因
如果你在微信开发中遇到{"errcode":-1,"errmsg":"system error,hints:[req_id:]"}这样的错误 ...
- Android开发中怎样调用系统Email发送邮件(多种调用方式)
在Android中调用其他程序进行相关处理,几乎都是使用的Intent,所以,Email也不例外,所谓的调用Email,只是说Email可以接收Intent并做这些事情 我们都知道,在Android中 ...
- 微信开发中使用curl忽略https证书
http://blog.csdn.net/ljh504429906/article/details/51103519 微信开发中需要使用http及https的post与get请求实现api的调用. ...
- Java开发微信公众号(五)---微信开发中如何获取access_token以及缓存access_token
获取access_token是微信api最重要的一个部分,因为调用其他api很多都需要用到access_token.比如自定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等在请求的时候 ...
- java开发中遇到的问题及解决方法(持续更新)
摘自 http://blog.csdn.net/pony12/article/details/38456261 java开发中遇到的问题及解决方法(持续更新) 工作中,以C/C++开发为主,难免与其他 ...
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...
- [HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...
- 微信开发中网页授权access_token与基础支持的access_token异同
问题1:网页授权access_token与分享的jssdk中的access_token一样吗? 答:不一样.网页授权access_token 是一次性的,而基础支持的access_token的是有时间 ...
- 微信开发中网页授权access_token与基础支持的access_token异同 【转载、收藏】
问题1:网页授权access_token与分享的jssdk中的access_token一样吗? 答:不一样.网页授权access_token 是一次性的,而基础支持的access_token的是有时间 ...
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
随机推荐
- rbd无法map(rbd feature disable)
在jewel版本下默认开启了rbd的一些属性 [root@lab8106 ~]# ceph --show-config|grep rbd|grep features rbd_default_featu ...
- Python input用户交互
1.input(),阻塞等待用户输入内容并敲回车. 1 #-*- encoding:utf-8 -*- 2 3 name = input('请输入你的名字') 4 5 age = input('请输入 ...
- MySQL第01课- CentOS + 单实例MySql编译安装总结
2016年2月,从oracle转向MySql ,碰上几个坑,特此记录 总结 1.注意环境变量.配置文件,操作过程不能出错 2.相比rpm方式安装,编译安装方式可以指定安装路径,再说安装是简单活,将来安 ...
- ServerLess之云函数实践-天气API
关注我的个人博客,发掘更多的内容 ServerLess之云函数实践-天气API 前言 云计算是大势所趋 Serverless 架构即"⽆服务器"架构,它是一种全新的架构方式,是云计 ...
- 【建议收藏】阿里P7总结的Spring注解笔记,把组件注册讲的明明白白
环境搭建 注解的方式是通过配置类的方式来注入组件,注解注入要比XML注入的方式简单,注解注入也需要在前者的基础上,添加一个spring-context的包,也是实际开发中常用的方式. 准备所需Jar包 ...
- 关于ABBYY的常见问题与解答
问:ABBYY的版本那么多,我不知道哪款是我需要的.可不可以帮助我选择? 答:您可在此查看不同版本的功能介绍与版本对比,选择适合自己的版本即可. 查看ABBYY FineReader 15功能:查看A ...
- idea中快速将类中的属性转为Json字符串的插件
当我们想要测试接口的时候,难免会根据一个类,一个一个的写json数据,当属性比较少时还行,但当属性多的时候就比较麻烦了, 为了解决这个问题,我们可以安装第三方的插件来快速生成json字符串. 步骤如下 ...
- CentOS7.X 下安装MySQL8.0(附文件)
这是64位的安装包.如果需要32位的可以去官网下载哦.步骤一样 1 获取安装资源包 mysql-8.0.18-1.el7.x86_64.rpm-bundle.tar 链接: https://pan.b ...
- AppWeb认证绕过漏洞(CVE-2018-8715)
AppWeb认证绕过漏洞(CVE-2018-8715) 一.漏洞描述 Appweb简介 Appweb是一个嵌入式HTTP Web服务器,主要的设计思路是安全.这是直接集成到客户的应用和设备,便于开发和 ...
- ubuntu配置网络和静态路由(界面配置形式)
目录 网卡配置 静态ip配置 静态路由 外网ip配置(动态获取DHCP) 内网ip和静态路由配置 本文主要针对ubuntu18.0系统进行界面形式配置网络.并配置静态路由. 网卡配置 静态ip配置 打 ...