关于苹果 ios safari 踩过的一些坑 记录下来
来源:互联网 发布:淘宝网首页中年女装 编辑:程序博客网 时间:2024/06/06 13:57
嗯.苹果的坑是很多 被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; } //可阻止默认点击阴影
<meta name="format-detection" content="telephone=no" /> 可阻止safair 将数字设别成电话号码 点击会拨打电话
还碰到过一种情况就是 遮罩层的时候 上下滑动的时候 页面下面有时候会出现白色的空白处.
解决方案应该有几种
我想了一种 当有遮罩层的时候就阻止滚动事件
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">
<link rel="shortcut 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吧
先这样吧.好不容易空暇一周.下周又得开始了
下次遇到safari的坑我也会慢慢记录下来的 等着我更新~
发一个自己的网站 导趣网 可以帮忙点点~很久没更新更新也更新数据 在处理导数据那块的东西 淘宝的api没资格申请。。只能用最笨的方法去弄数据.
- 关于苹果 ios safari 踩过的一些坑 记录下来
- ios 苹果内购踩过的坑
- 关于Gradle踩过的一些坑
- 一些碰到的正则验证,记录下来
- 记录自己开发中踩过的一些坑
- 关于mvc的一些体会,看到这一篇感觉领悟到了,所以记录下来
- 记录Hbuilder项目使用xcode离线打包上传苹果商店踩过的坑
- 关于iOS开发的一些记录
- iOS开发 关于iBeacon的一些记录
- iOS 关于NSDate的一些记录
- 关于ios,safari和iframe的各种
- IOS-safari遇到的坑
- 记录一些用过的
- 项目无法导入,关于Gradle踩过的一些坑
- 项目无法导入,关于Gradle踩过的一些坑
- 关于使用BigDecimal类踩过的一些坑...
- iOS 苹果内购 In-App Purchase 踩过的坑
- 从零开始把一些简单的不易理解的记录下来。
- poj 3268 dijkstra
- 高斯函数
- PHPer能力提升(第二章)
- CASE WHEN用法
- KoaHub平台基于Node.js开发的Koa的模板系统handlebars插件代码详情
- 关于苹果 ios safari 踩过的一些坑 记录下来
- 创建博客初衷
- 解析XML字符串,得到各个节点数据
- 礼物说效果图
- nginx作为下载文件服务器
- 测试了hprose,挺方便,不过有限制
- Android进程等级
- Rxjava简介(一)
- 如何根据SeetaFaceDetection教程创建自己的工程