关于苹果 ios safari 踩过的一些坑记录下来

嗯.苹果的坑是很多被safari折磨的死去活来的

ios10 safari 页面缩放问题

测试的时候有个家伙是ios10 然后发现页面可以缩放了??? wtf? 其他的不都好好的么

找了很多办法就一个靠谱一点

在全局加个js

var util={};

(function(util){

getIosVersion: function () {
            var agent = navigator.userAgent.toLowerCase();
            var version;
            if (agent.indexOf("like mac os x") > 0) {
                //ios
                var regStr_saf = /os [\d._]*/gi;
                var verinfo = agent.match(regStr_saf);
                version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
            }
            if (version != "") {
                return version.split(".")[0];
            }
            return version;
        }})(util);

if (parseInt(util.getIosVersion()) > 9) { //这个是判断ios的版本这个你随便改改就行了
            //阻止ios10系统的用户缩放动作
            document.addEventListener('gesturestart', function (e) {
                e.preventDefault();
            });
        }

不过这个方法也有点问题有时候用户还是能缩放页面但至少能阻止99%的用户缩放动作

还有个问题就是ios10的文本框你点了之后页面都会放大.

后面也找到解决方案了给文本框设置一个默认的文字大小 font-size：16px

苹果是一个注重用户体验的公司他的safari浏览器认为如果文本框的字体大小没有16用户就看不清然后就默默的给用户放大了页面

so..你设置一下文本框默认字体就行了.

ios safari点击阴影

* { -webkit-tap-highlight-color: transparent !important; } //可阻止默认点击阴影

还碰到过一种情况就是遮罩层的时候上下滑动的时候页面下面有时候会出现白色的空白处.

解决方案应该有几种

我想了一种当有遮罩层的时候就阻止滚动事件

document.addEventListener('touchmove', function (event) { 　　 //监听滚动事件
//有遮罩层的时候就将滚动事件禁用
if (($(".mask").length > 0 && !$(".mask").is(":hidden")) || ($(".layermbox").length > 0 && !$(".layermbox").is(":hidden"))) {

//layermbox 使用了layer.插件可以去看看这个插件很强大 6的一比

                event.preventDefault();
            }
        });

关于将页面添加到主屏幕的图标问题在head加一个这样的标签就行了就不解释了应该懂吧

<link rel="apple-touch-icon" href="/favicon.ico">

页面标题上面的图标

20161215更新：

上次碰见一个问题就是一个抢任务的需求抢到任务需要跳转到新的窗口去做任务

so 刚开始的时候用div做个按钮点一下 ajax到后台抢任务成功后 window.open() 打开新窗口

电脑谷歌模拟手机没问题可是测试的时候用手机死活打不开新的窗口吗的弄的都怀疑人生了...后面发现貌似safari的安全机制问题不能在回调方法里面使用window.open()方法..一万个草泥马奔腾啊...详情可一个看这个哥们的文章解决 safari window.open 无法实现的问题

问题是发现了啊我只是看了一下不是我的问题就好是safari的问题后面想了想饶了一圈

用了一个隐藏的a标签 <a class='test hide' target="_blank" href='****' >***</a> ajax成功给这个a一个模拟点击事件不就解决了吗机智如我..

想法很美好最后还是挂了..谷歌模拟手机没问题但是safari还是不行

后面又想了一下索性直接在这个a上面写事件吧点击请求成功返回true 不成功返回false不就行了机智如我

code如下：

$(".test.hide").click(function () {
            var $this = $(this);
            if ($this.is(".disabled")) {
                return !1;
            }
            $this.addClass("disabled");
            $.ajaxSetup({ async: false });//得设置成同步的
            layer.open({ type: 2, time: 60000, shadeClose: false });
            try {
                $.ajax({
                    url: '/webhandle',
                    data: { "act": "***","rid": Math.random() },
                    type: 'post',
                    datatype: 'json',
                    success: function (data) {
                        $this.removeClass("disabled");
                        if (data.flag) {
                            layer.closeAll();
                            //window.open($this.data("href"));
                        } else {
                            layer.closeAll();
                            util.alert(data.message);
                            throw new Error("错误");
                        }
                    },
                    error: function () {
                        layer.closeAll();
                        $this.removeClass("disabled");
                        util.alert("服务器错误,请稍候再试!");
                        throw new Error("错误");
                    }
                });
            } catch (e) {
                return false;
            }
        });

在里面两个回调方法里面一定要用个theow new Error("fsdfd")哈不要用return false哈因为return false只是返回里面的方法并不是a标签的点击事件的返回值

还有就是你要弄清楚到底是a的点击事件先执行呢还是它的默认跳转先执行我用的时候只要为a写了点击事件都是点击事件先执行.

不要问题为啥不用系统的 alert('') 有两点

1.alert比较丑..不统一还得用户手动去点击确定

2. 测试的时候发生过一种情况在某种情况下alert('') 这个框不会弹出来!!!我特么整个人都懵比了！！

但是代码肯定是执行了！因为在后面我加了一个debug信息如

alert('弹出来吧');util.debug("执行了下一步");

var util={};

(function(util){

util.isDeBug=true;//上线把这个开关关了就好了

util.debug=function(msg){

if(util.isDeBug){

$("body").append(msg);//因为在手机上调试看不到console.log()信息  只能绕一圈打印出来调试的信息

}

};

})(util)

结果是alert() 并没有弹出来值但是debug打印出来值了懵比了..然后将alert() 写了一个自定义的弹窗然后就ok了日了dog。。。。

我说的是某种情况比较复杂各种回调具体我就不举例子了.. alert()没有执行但是基本上 alert 是可以执行的

对了 safari还有个一个问题就是拷贝有时候总是拷贝不上去是在ios9的一个小版本失败比例有点高.. 应该算ios的bug吧

查了一下并没有好的解决方案...

比如吧

if($("****").length>0){

$("****")[0].oncopy=function(){//得用原生的方法

util.debug('复制事件发生');

}

}

我们在测试的时候从来没有发生过这种情况但是上线之后总有用户反映这个问题搞得也是很头疼..真解决不了...

我们问用户是不是没有点到拷贝那个文字啊用户说肯定点到了你在质疑我吗也是无奈....只能叫用户刷新试试... 这个坑至今没有解决好但是换了产品流程了

之前一定得让用户拷贝才能进行下一步用户拷贝不了那就一直不能下一步一直卡在这...现在直接把"一定得复制"这个步骤放开了算是解决了产品的问题

但是为啥复制失败没有解决方案.....ios9.***.**的bug吧

今天又上一个版本 ...别通宵就好。。。。。。

------------2017-09-21

今天又发现一个问题.

手机页面overflow scroll滑动卡顿的问题

很奇怪,我在电脑模拟手机,想怎么滑就怎么滑，但是一用手机,卡出翔...后面找了一些资料解决了

加一句:*{-webkit-overflow-scrolling: touch;} 解决

先这样吧.好不容易空暇一周.下周又得开始了

下次遇到safari的坑我也会慢慢记录下来的等着我更新~

发一个自己的网站导趣网可以帮忙点点~很久没更新更新也更新数据在处理导数据那块的东西淘宝的api没资格申请。。只能用最笨的方法去弄数据.

关于苹果 ios safari 踩过的一些坑 记录下来

猜你喜欢

关于苹果 ios safari 踩过的一些坑记录下来