js_脚本之家,iOS与Android平台上难点列表

多年来在搞三个依照vue的后台管理连串包容IE浏览器,眼泪都要掉下来。后来和付加物说了,同意宽容IE11,感动得本人泪水啊

要CSS伪类 :active 生效,只须要给 document 绑定 touchstart 或 touchend
事件

那边也正是记录一下自个儿遭遇的一级烦的bug

<style>
a {
  color: #000;
}
a:active {
  color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
  document.addEventListener('touchstart',function(){},false);
</script>

首先是’babel-polyfill’ 和”autoprefixer-loader” 这么些毫无多说,资源第一次全国代表大会堆

消除 transition 闪屏

八个主意

-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-backface-visibility: hidden;
/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/

接下来 打包之后一直const 去不掉,查精通后是 webpack 有 webpack-dev
不扶植IE低版本了,要把 webpack 版本往下调,笔者是拒却的

消灭 IE10 里面包车型大巴不行叉号

input:-ms-clear{display:none;}

1、IE new Date() 失败

有关 iOS 与 OS X 端字体的优化(横竖屏会现出字体加粗不相同等等State of Qatar

iOS
浏览器横屏时会重新恢复生机设置字体大小,设置 text-size-adjust 为 none 能够缓慢解决iOS 上的主题材料,但桌面版 Safari
的书体缩放成效会失灵,由此最棒方案是将 text-size-adjust 为 100% 。

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
new Date//Mon Jan 01 2018 00:00:00 GMT+0800  chrome//Invalid Date IE new Date//Mon Jan 01 2018 00:00:00 GMT+0800  chrome//Mon Jan 01 2018 00:00:00 GMT+0800  IE

JS 事件相关

click 事件广泛 300ms 的推迟 在手提式有线电话机上绑定 click 事件,会使得操作有 300ms
的延迟,体验并不是很好。 开拓者大相当多会动用封装的 tap 事件来代替 click
事件,所谓的 tap 事件由 touchstart 事件 + touchmove 推断 + touchend
事件封装组成

2、在IE里,点击 input type=checkbox 数十二回点击会逻辑混乱

iOS 点击会慢 300ms 难题

应用 CSS3
动漫的时尽量接收3D加速,进而使得动漫变得通畅。动漫进度中的动漫闪白能够通过
backface-visibility 隐蔽。

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

原因:在 IE中,数十四次点击之后会同不日常间出发 dblclick 和 click
事件,而那五个事件是联合实践了 click 事件,会促成click 事件失效

不让 Android 手提式有线电话机识别邮箱

<meta content="email=no" name="format-detection" />

 

明令幸免 iOS 识别长串数字为电话

<meta content="telephone=no" name="format-detection" />

 

取缔 iOS 弹出各样操作窗口

-webkit-touch-callout:none
$("input[type='checkbox']").attr('ondblclick', 'this.click.on('dblclick','input[type="checkbox"]',function; // 把双击事件变成单击事件 })

不许客商选中文字

-webkit-user-select:none

只顾,要认清是还是不是是IE浏览器,要否则会把chrome 带进沟里

获取滚动条

window.scrollY
window.scrollX

 

比如要绑定二个 touchmove 的风云,平常的景况下雷同那样(来自呼吸二氧化碳卡塔尔(قطر‎

 

$('div').on('touchmove', function(){
   //.….code
});

 

而只要中间的 code 供给管理的事物多的话,FPS
就能够减低影响程序顺滑度,而一旦改成这么

js_脚本之家,iOS与Android平台上难点列表。 

$('div').on('touchmove', function(){
   setTimeout(function(){
     //.….code
   },0);
});

把代码放在 setTimeout 中,会发掘前后相继变快.

 

3、input placeholder 会触发 input 事件

有关 iOS 系统中,普通话输入法输入英语时,字母之间或然会现出一个百分之十四空格(大旨科技(science and technology卡塔尔国葛亮卡塔尔国

能够透过正则去掉

 

this.value = this.value.replace(/u2006/g, '');

 

情趣正是说您渲染上去了,大概会活动触发一次input,然后清空了文本,又触及二遍

至于 Android WebView中,input 元素输入时现身的奇幻景况

见图

图片 1

Android web视图,举例在 One plus EVO 和Samsung的 Galaxy Nexus
中,文本输入框在输入时表现的就好像占位符。景况为三个看似水印的事物在客户输入区域,一旦顾客开头输入便会秋风落叶(见图片卡塔尔(قطر‎。

在 Android
的暗中同意样式下当输入框得到主题后,若存在叁个相对定位依然fixed的要素,布局会被破坏,别的因素与系统输入字段会发生重叠(如搜寻Logo将清除为搜索字段卡塔尔,能够考查到布局与原有输入字段有偏差(见截图State of Qatar。
这是一个十二分复杂的主题素材,以下轻松构造能够复出这几个标题:

 

<label for="phone">Phone: *</label>
<input type="tel" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />

 

斩尽杀绝办法

 

-webkit-user-modify: read-write-plaintext-only

 

详尽:Androdi开采刘亚超WebView摄像教程
 
 该属性会诱致普通话无法输入词组,只好单个字。多谢鬼哥与飞(游勇飞)进献此主题素材与施工方案

根本是,IE tm 的绝不脸地认可了!!说不影响安全,我们就不修复了哈

JS 动态变化的 select 下拉菜单在 Android2.x 版本的私下认可浏览器里不起功用

减轻方式删除了 overflow-x:hidden; 然后在JS生成下来菜单之后 focus
集中,这两步操作之后杀绝了难点。(来自岛都-小Qi卡塔尔

那东西的协作就差别了,用span 来代表 placeholder
也是能够的呗,非常少哔哔

移步端 HTML5 audio autoplay 失效难点

本条不是
BUG,由于自动播放网页中的音频或录制,会给客户带给一些烦劳大概不供给的流量消耗,所以苹果系统和安卓系统平时都会幸免自动播放和动用
JS 的触及播放,必得由顾客来触发才可以播放。

消除方法思路:先通过客户 touchstart
触碰,触发播放并暂停(音频开头加载,后边用 JS 再操作就没难点了)。

解决代码:

 

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

 

4、Input type=file 中,将 其置空解除 缓存会在IE中触发 change 事件,

移动端 HTML5 input date 不支持 placeholder 问题

input type date 的 placeholder 匡助性有一定难点,因为浏览器会针对此类型
input 扩大 datepicker 模块,看上去没那么供给支撑 placeholder。

对 input type date 使用 placeholder
的目标是为着让客商更确切的输入日期格式,iOS 上会有 datepicker 不博览会示
placeholder 文字,可是为了统一表单外观,往往供给出示。Android
部分机型未有 datepicker 也不会显得 placeholder 文字。

简单易行的开展了测量检验:

桌面端(Mac)

  • Safari 不帮忙 datepicker,placeholder 平时呈现。
  • Firefox 不支持 datepicker,placeholder 平常突显。
  • Chrome 支持 datepicker,显示 年、月、日 格式,忽略 placeholder。

移动端

  • 一加5 iOS7 有 datepicker 功效,不过不显得 placeholder。
  • Andorid 4.0.4 无 datepicker 功能,不显示 placeholder

主题材料消除方法:

先使其 type 为 text,那时补助 placeholder,当触摸也许聚集的时候,使用 JS
切换使其触发 datepicker 作用。

 

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">
var fileName = $;filename == undefined

IOS Safari 支持localstorage但是setItem异常(QUOTA_EXCEEDED_ERR:DOM Exception 22)

 

平台:IOS8.1
browser:Safari600.1.4

 

主题材料根子于项目须要在浏览器中遮罩提醒,点击关闭状态存款和储蓄在localstorage中。Safari浏览器关闭后刷新页面层如故存在 bug
issue 简单的存款和储蓄状态能够运用cookie的法子代替。

那东西的相配就差异了,能够看清一下filename,十分少哔哔

Chrome 地址栏自动隐敝人机联作行为对于fixed 顶端的成分遮挡

系统:IOS8.1
浏览器:Chrome 26.0.1410.53

 

陈说音信:页面包涵fixed最上端的tip
element,当页面向下滑动的时候Chrome地址栏自动蒙蔽,当发展滑动的时候地址栏自动现身。这种互相行为本身的功利会增大客户可视、交互作用区域。可是在Chrome
26那么些版本这一个浏览器UI结构使用adjustPan的艺术,以致于向上海滑稽剧团动将来fixed的要素未有被活动向下移动(未有重绘)。

bug fixed 化解办法在这里处

5、input type=text 中,text-overflow: ellpsis失效

Android平台遮罩层下的input、select、a等因素得以被点击和focus(点击穿透卡塔尔(قطر‎

标题挖掘于IPhone,那些在一定须要下才会有,因而只要未有左近题材的能够不看。首先需假若浮层操作,在Samsung上被遮罩的要素还是能够获得focus、click、change. bug
issue ,在翻看bug报告list今后,找到了三种减轻方案,第一是由此层彰显将来参与相应的class名调整,第二是经过将可获得关节成分参预的disabled属性,也能够动用属性加dom锁定的方法(disabled的一种转移方式)

input输入框要是东西太多,希望展现位 …
省略号,不过chrome成功了,IE失败了

部分机型存在type为search的input,自带close按键样式校正章程

有个别机型的搜索input控件会自带close按键(八个伪成分),而平凡为了合作全体浏览器,大家会本人完毕多个,那个时候去掉原生close开关的章程为

#Search::-webkit-search-cancel-button{
    display: none;    
}

假设想使用原生close按键,又想使其相符设计风格,能够对这几个伪成分的体制进行修正。

亟待将 input 标签置为 readonly 才具起效果

唤起select的option展开

zepto方式:

$(sltElement).trrgger("mousedown");

原生js方式:

function showDropdown(sltElement) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    sltElement.dispatchEvent(event);
};

 

没错,那东西是 iview select 里的 input标签

initTheSelect () { var input = document.querySelector('.ellipsisInput .ivu-select-selection .ivu-select-input'); input.setAttribute; input.addEventListener('click', function  { input.removeAttribute; input.focus; input.addEventListener('blur', function  { input.setAttribute},

6、在IE中,本系统是 使用了cookie
来保存验证音信的,但是没多长时间就能够窥见发送的伏乞都不带走cookie而导致重新登陆

翻开了,是304 即读取缓存的时候,不会带走cookie,然后假设读到三个重新登录,你这一个体系宗旨就完了,一直从缓存里读取,你登入了?诶,有缓存,笔者拿缓存吧。

缓存:咳咳,你不是上次再也登录吗?笔者给你存着呢,给给给,重新登入去呢。

之所以依旧设置IE不缓存,要么代码改

后端设置,前端的设置要么不保障,要么就是太艰辛,后端几行代码化解

不许浏览器端或缓存服务器缓存当前页面音信。

response.setHeader( "Pragma", "no-cache" ); response.setDateHeader; response.addHeader( "Cache-Control", "no-cache" );//浏览器和缓存服务器都不应该缓存页面信息response.addHeader( "Cache-Control", "no-store" );//请求和响应的信息都不应该被存储在对方的磁盘系统中; response.addHeader( "Cache-Control", "must-revalidate" );*//于客户机的每次请求,代理服务器必须想服务器验证缓存是否过时;

争持住了,依旧自个儿那边改呢

axios.interceptors.request.use( config => { // 给每个请求加上一个 ieT 的时间参数 if (window.navigator.userAgent.indexOf { config.url = config.url + `?ieT=${new Date}` } return config; }, err => { return Promise.reject;

7、本系统应用了 tinymce
来扩充富文本编辑,但是,开首化退步!!!並且不报错!!!

此处运用tingmce只是导入了 tinymce多少个文书,其他文件都放进了 dist
文件夹之中,然后让她和睦去读取文件

不知情为啥互连网一点能源都未曾,难道环球就本人壹位遭逢了?不过那bug小编去别的系统上必现的哎,老哥

那bug干扰了自家任何两日!!一行一行在IE里面debug,相比chrome里的debug终于有结果了

是tinymce在IE中的基本路径表现和chrome不相近,改源码

var load = function (name, addOnUrl, success, scope, failure) { if  { return;}var urlString = typeof addOnUrl === 'string' ? addOnUrl : addOnUrl.prefix + addOnUrl.resource + addOnUrl.suffix; if (urlString.indexOf !== 0 && urlString.indexOf { // 兼容IE 浏览器 // 在load函数中,需要判断 当前浏览器,然后加上 dist urlString = AddOnManager.baseURL + 'dist/' + urlString; console.log } urls[name] = urlString.substring(0, urlString.lastIndexOf; if  { loadDependencies(name, addOnUrl, success, scope); } else { ScriptLoader.ScriptLoader.add(urlString, function () { return loadDependencies(name, addOnUrl, success, scope); }, scope, failure); }}; var loadLanguage = function  { var settings = editor.settings; if (settings.language && settings.language !== 'en' && !settings.language_url) { // 兼容IE浏览器 if (window.navigator.userAgent.indexOf { settings.language_url = editor.editorManager.baseURL + '/dist/langs/' + settings.language + '.js'; } else { settings.language_url = editor.editorManager.baseURL + '/langs/' + settings.language + '.js'; } } if (settings.language_url && !editor.editorManager.i18n.data[settings.language]) { scriptLoader.add(settings.language_url); }};

var getSkinUrl = function  { var settings = editor.settings; var skin = settings.skin; var skinUrl = settings.skin_url; if  { var skinName = skin ? skin : 'lightgray'; if  { skinUrl = editor.documentBaseURI.toAbsolute; } else { // 兼容IE 浏览器 if (window.navigator.userAgent.indexOf { skinUrl = EditorManager.baseURL + '/dist/skins/' + skinName; } else { skinUrl = EditorManager.baseURL + '/skins/' + skinName; } } } return skinUrl;};

8、导出excel文件

实在俺是赞成于选用 iview 自带的 exportCsv 的,可是 其

不会试行 columns 里的render、

导出的数字 0002 展开会成为 2

看不尽难题,不能够,那么些文件天生的,幸免不了

IE 的话,又不般配download属性、笔者的体系又说如何阻碍了正向与反向缓存什么的,点进入还蛮多切合的东西的,结果window.href
也gg,只好利用 msSaveBlob 了

// 兼容IEif (window.navigator.msSaveOrOpenBlob) { const blob = new Blob([template], {type: "application/vnd.ms-excel"}) navigator.msSaveBlob(blob, this.name.indexOf > 0 ? this.name : this.name + '.xls');} else { let link = document.createElement; link.href = uri + this.base64; link.download = this.name.indexOf > 0 ? this.name : this.name + '.xls'; link.click();}

9、复制粘贴失效!?

测量检验和自身说复制粘贴失效了,小编一切人差超级少爆炸!

剖判一下:在IE中,复制之后会将回车复制进去,然后黏贴到input标签时,只突显第一行

//监听 paste事件MyPaste () { if (window.navigator.userAgent.indexOf { var copyText = window.clipboardData.getData; this.filters.phoneNum = this.filters.phoneNum ? this.filters.phoneNum + copyText.replace : copyText.replace; }},...

还也许有不菲,可是就不一一讲了,其余的应有能查到,byebye

上述正是本文的全体内容,希望对我们的读书抱有助于,也盼望大家多多关照脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注