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(不定时更新)的更多相关文章

  1. 有关微信开发中errorcode:-1 errmsg:system error 错误的一点原因

    如果你在微信开发中遇到{"errcode":-1,"errmsg":"system error,hints:[req_id:]"}这样的错误 ...

  2. Android开发中怎样调用系统Email发送邮件(多种调用方式)

    在Android中调用其他程序进行相关处理,几乎都是使用的Intent,所以,Email也不例外,所谓的调用Email,只是说Email可以接收Intent并做这些事情 我们都知道,在Android中 ...

  3. 微信开发中使用curl忽略https证书

    http://blog.csdn.net/ljh504429906/article/details/51103519 微信开发中需要使用http及https的post与get请求实现api的调用.   ...

  4. Java开发微信公众号(五)---微信开发中如何获取access_token以及缓存access_token

    获取access_token是微信api最重要的一个部分,因为调用其他api很多都需要用到access_token.比如自定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等在请求的时候 ...

  5. java开发中遇到的问题及解决方法(持续更新)

    摘自 http://blog.csdn.net/pony12/article/details/38456261 java开发中遇到的问题及解决方法(持续更新) 工作中,以C/C++开发为主,难免与其他 ...

  6. 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  7. [HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  8. 微信开发中网页授权access_token与基础支持的access_token异同

    问题1:网页授权access_token与分享的jssdk中的access_token一样吗? 答:不一样.网页授权access_token 是一次性的,而基础支持的access_token的是有时间 ...

  9. 微信开发中网页授权access_token与基础支持的access_token异同 【转载、收藏】

    问题1:网页授权access_token与分享的jssdk中的access_token一样吗? 答:不一样.网页授权access_token 是一次性的,而基础支持的access_token的是有时间 ...

  10. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

随机推荐

  1. rbd无法map(rbd feature disable)

    在jewel版本下默认开启了rbd的一些属性 [root@lab8106 ~]# ceph --show-config|grep rbd|grep features rbd_default_featu ...

  2. Python input用户交互

    1.input(),阻塞等待用户输入内容并敲回车. 1 #-*- encoding:utf-8 -*- 2 3 name = input('请输入你的名字') 4 5 age = input('请输入 ...

  3. MySQL第01课- CentOS + 单实例MySql编译安装总结

    2016年2月,从oracle转向MySql ,碰上几个坑,特此记录 总结 1.注意环境变量.配置文件,操作过程不能出错 2.相比rpm方式安装,编译安装方式可以指定安装路径,再说安装是简单活,将来安 ...

  4. ServerLess之云函数实践-天气API

    关注我的个人博客,发掘更多的内容 ServerLess之云函数实践-天气API 前言 云计算是大势所趋 Serverless 架构即"⽆服务器"架构,它是一种全新的架构方式,是云计 ...

  5. 【建议收藏】阿里P7总结的Spring注解笔记,把组件注册讲的明明白白

    环境搭建 注解的方式是通过配置类的方式来注入组件,注解注入要比XML注入的方式简单,注解注入也需要在前者的基础上,添加一个spring-context的包,也是实际开发中常用的方式. 准备所需Jar包 ...

  6. 关于ABBYY的常见问题与解答

    问:ABBYY的版本那么多,我不知道哪款是我需要的.可不可以帮助我选择? 答:您可在此查看不同版本的功能介绍与版本对比,选择适合自己的版本即可. 查看ABBYY FineReader 15功能:查看A ...

  7. idea中快速将类中的属性转为Json字符串的插件

    当我们想要测试接口的时候,难免会根据一个类,一个一个的写json数据,当属性比较少时还行,但当属性多的时候就比较麻烦了, 为了解决这个问题,我们可以安装第三方的插件来快速生成json字符串. 步骤如下 ...

  8. CentOS7.X 下安装MySQL8.0(附文件)

    这是64位的安装包.如果需要32位的可以去官网下载哦.步骤一样 1 获取安装资源包 mysql-8.0.18-1.el7.x86_64.rpm-bundle.tar 链接: https://pan.b ...

  9. AppWeb认证绕过漏洞(CVE-2018-8715)

    AppWeb认证绕过漏洞(CVE-2018-8715) 一.漏洞描述 Appweb简介 Appweb是一个嵌入式HTTP Web服务器,主要的设计思路是安全.这是直接集成到客户的应用和设备,便于开发和 ...

  10. ubuntu配置网络和静态路由(界面配置形式)

    目录 网卡配置 静态ip配置 静态路由 外网ip配置(动态获取DHCP) 内网ip和静态路由配置 本文主要针对ubuntu18.0系统进行界面形式配置网络.并配置静态路由. 网卡配置 静态ip配置 打 ...