移动端开发IOS和安卓碰到的兼容性问题

这些问题都是我实际开发中碰到的问题,我想把它们都记录下来,供自己和他人学习。
1.JavaScript中的Date对象在Safari与IOS中的坑
var date =new Date("2018-07-25 19:25");
这段代码是获得字符中指定的日期,它Firefox、Chrome中就能运行,但是放在Safari就会报错,错误是NaN
解决办法:

//将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 
var value = '2018-07-25 19:25';
value = value.replace(/\-/g, "/");

2.禁止图片点击放大
部分安卓手机点击图片会放大,如需要禁止放大,只需要设置css属性

img{ 
    pointer-events: none; 
} 
这个会让img标签的点击事件失效,如果想要给图片添加点击事件就要给上面再写一层

3.禁止页面缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
这样设置在ios10系统中是失效的,如果需要禁止ios缩放,下面代码亲测有用

window.onload=function () { 
      禁止双击放大 
      document.addEventListener('touchstart',function (event) {  
            if(event.touches.length>1){  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
        document.addEventListener('touchend',function (event) {  
            var now=(new Date()).getTime();  
            if(now-lastTouchEnd<=300){  
                event.preventDefault();  
            }  
            lastTouchEnd=now;  
        },false);
      禁止手势放大
      document.addEventListener('gesturestart', function (event) {
         event.preventDefault();
      });
}

4.禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no">

5.禁止复制、选中文本
设置CSS属性 -webkit-user-select:none

6.JS跳转手机QQ的聊天页面
Android: URL
mqqwpa://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web

iOS: URL:
mqq://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web

7.一些情况下对非可点击元素如(label,span)监听点击事件,不会在IOS下触发,css增加cursor:pointer就搞定了(未测试)

8.上下拉动滚动条时卡顿、慢(未测试)

body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

9.清除button,input,a标签的默认样式

a:hover, a:active,button,input:focus{
  outline: none;
  border: none;
}

未完待续

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,238评论 1 45
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,143评论 0 3
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 8,660评论 0 4
  • 冬阳穿透薄雾照射在小城东面的墙上。 “买包子咯,新出笼的包子嘞!”一声吆喝打破了早市的宁静,伙计揭开蒸屉盖,随着一...
    星舟梦旅阅读 1,607评论 0 2
  • 昨天还在因为代沟的问题而发牢骚,感觉自己不被理解,生活没有话语权。当有人从一个更高的角度来透析事情的本质的时候,一...
    Natsuka阅读 1,279评论 0 1

友情链接更多精彩内容