嗯.苹果的坑是很多 被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的问题 后面想了想 饶了一圈
用了一个隐藏的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的坑我也会慢慢记录下来的 等着我更新~
------------------------------------------------------2018-11-12--------------
刚过了双十一，不知道大家剁手了没有
今天遇到一个比较奇葩的问题，而且我一两年前还遇到过，也解决了，今天还试了好久
就是在使用jq的时候 on方法绑定出问题，所有的事件都绑定不上去，但是在模拟器上面很正常
搞了个把小时，有点自闭了 百度了一下
为哪个元素绑定事件 就得为这个元素的css加上 cursor: pointer;属性 后面一想 卧槽 这个问题我以前遇到过啊，原来忘了，现在记录一下
好 加了这个css之后呢 点击 卧槽 又有阴影了 难受啊 马飞
这时候上面又有一句代码 * { -webkit-tap-highlight-color: transparent !important; } //可阻止默认点击阴影
加上去，好了 解决 美滋滋
=====
图片压缩变形 加上这一句代码 解决
img { object-fit: cover; }
=====
引入 swiper 左右滑动 高度自适应的问题
.swiper-slide{height:1px} /* 随意指定一个height值即可 */
.swiper-slide-active { height:auto}解决了
