PC端兼容性问题 Dom Bom ecma
- HTML对象获取问题
FireFox:document.getElementById(“idName”);
ie:document.idname或者document.getElementById(“idName”).
解决办法:统一使用document.getElementById(“idName”); - const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量. - event.x与event.y问题
说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX. - window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href. - frame问题
以下面的frame为例:
移动端
viewport
先上模板
写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
禁止复制、选中文本
.el {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才可以响应
方法:可以用html5的oninput事件去代替keyup
ios 设置input 按钮样式会被默认样式覆盖
解决方式如下:
input,textarea {
border: 0;
-webkit-appearance: none;
}
消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}
手机上的flex布局时会有兼容性问题,只用新版本的会出现安卓手机不识别的现象
flex布局对于低版本的安卓,不支持flex-wrap:wrap属性,但是ios系统支持换行属性,这个时候如何解决呢?当然是不使用换行,用其他方式代替。
.box{
display: -webkit-box;
/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. /
display: -moz-box; / 老版本语法: Firefox (buggy) /
display: -ms-flexbox; / 混合版本语法: IE 10 /
display: -webkit-flex; / 新版本语法: Chrome 21+ /
display: flex; / 新版本语法: Opera 12.1, Firefox 22+ */
}
input 的placeholder属性会使文本位置偏上
line-height: (和input框的高度一样高)—pc端解决方法
line-height:normal —移动端解决方法
input type=number之后,pc端出现上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
实现android和ios系统手机打开相机并可选择相册功能
$(function () {
//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机,是则是true
var isIos = (ua.indexOf(‘iphone’) != -1) || (ua.indexOf(‘ipad’) != -1);
if (isIos) {
$(“input:file”).removeAttr(“capture”);
};
})
移动端 HTML5 audio autoplay 失效问题
这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。
解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。
解决代码:
document.addEventListener(‘touchstart’,function() {
document.getElementsByTagName(‘audio’)[0].play();
document.getElementsByTagName(‘audio’)[0].pause();
});
移动端 video在部分android机播放之后浮在最上层,设置z-index无效
这个目前没有好的办法解决
情景一:页面有视频,点击页面按钮显示弹出层(比如让用户输入用户信息),这时候视频会出现在弹出层上面,是不是很-d疼?
方案:点击按钮时候把video隐藏hide,关闭弹出层show,过程中视频声音还在
情景二:页面很长,往下翻滚时,视频在播放,脱离文档流
方案:页面滚动到某一合适位置把video隐藏hide,回滚到某一位置show,过程中视频声音还在
有些说position可以解决,我没有试
关于 iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格
this.value = this.value.replace(/\u2006/g,’’);
关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
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%;
移动端点击300ms延迟
原因:浏览器兴起初期,为了判断用户是双击还是单击,就设置了一个时间段300ms,用户单击后300ms后做事件处理,如果在300ms内连续点击,就判断为双击,做双击处理事件。
所以现在用click绑定事件呢,就会有300ms延迟的问题。
300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。
推荐两个js,一个是fastclick,一个是tap.js
移动端点透问题
案例如下:
div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接,我们给div绑定tap事件:
$(’#haorooms’).on(‘tap’,function(){
$(this).hide();
});
我们点击蒙层时 div正常消失,但是当我们在a标签上点击蒙层时,发现a链接被触发,这就是所谓的点透事件。
原因:
touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的,这个时间大概在300ms左右,也就是说我们tap触发之后蒙层隐藏, 此时 click还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下面的a链接上。
解决:
尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
用fastclick,https://github.com/ftlabs/fas…
用preventDefault阻止a标签的click
延迟一定的时间(300ms+)来处理事件 (不推荐)
以上一般都能解决,实在不行就换成click事件。
下面介绍一下touchend事件,如下:
$("#haorooms").on(“touchend”,function(event) {
event.preventDefault();
});
react 移动端 兼容性问题和一些小细节
使用 ES6 的浏览器兼容性问题
react 对低版本的安卓webview 兼容性
iOS下 fixed与软键盘的问题
onClick 阻止冒泡
meta对于移动端的一些特殊属性
页面禁止复制、选中文本
1.使用 ES6 的浏览器兼容性问题
由于 Babel 默认只转换转各种 ES2015 语法,而不转换新的 API,比如 Promise,以及 Object.assign、Array.from 这些新方法,这时我们需要提供一些 ployfill 来模拟出这样一个提供原生支持功能的浏览器环境。
主要有两种方式:babel-runtime 和 babel-polyfill。
A.babel-runtime
1.babel-runtime 的作用是模拟 ES2015 环境,包含各种分散的 polyfill 模块,我们可以在自己的模块里单独引入,比如 promise:
2.它们不会在全局环境添加未实现的方法,只是这样手动引用每个 polyfill 会非常低效,我们可以借助 Runtime transform 插件来自动化处理这一切。
首先使用 npm 安装
3.然后在 webpack 配置文件的 babel-loader 增加选项:
B.babel-polyfill
而 babel-polyfill 是针对全局环境的,引入它浏览器就好像具备了规范里定义的完整的特性,一旦引入,就会跑一个 babel-polyfill 实例。用法如下:
1.安装 babel-polyfill
2.在入口文件中引用:
其实做到这些,在大部分浏览器就可以正常跑了,
2.react 对低版本的安卓webview 兼容性
A.android较低版本webview不支持Object.assign改用var objectAssign = require('object-assign’) 这种情况上面方案可以解决
B.import React from ‘react’;import ReactDOM from ‘react-dom’;//不可放在其他模块引入的后面,否则android5.0及以下版本webview报错
3.iOS下 fixed与软键盘的问题
fixed失效是由于软键盘唤起后,页面的 fixed 元素将失效(ios认为用户更希望的是元素随着滚动而移动,也就是变成了 absolute 定位),
既然变成了absolute,所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。解决方案就是让整个页面处于一屏高度就能解决问题的根本
样式:
warper{
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */ }
.fix-bottom{
position:fixed;
bottom:0;
width: 100%;
}
4.onClick 阻止冒泡
阻止冒泡事件分三种情况
A、阻止合成事件间的冒泡,用e.stopPropagation();
B、阻止原生事件与最外层document上的事件间的冒泡,用e.nativeEvent.stopImmediatePropagation();
C、阻止合成事件与除最外层document上的原生事件上的冒泡,通过判断e.target来避免
5.meta对于移动端的一些特殊属性
6.页面禁止复制、选中文本 -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;Vue适配
1,先看看网上关于移动端适配讲解
再聊移动端页面适配,rem和vw适配方案!
基础点:rem相对根节点字体的大小。所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧; 基准:750设计稿;
这是方案的基础理论,在这个基础上,我们还要搞明白,到底要干一件什么事情!
目标一 、手机适配:就是页面上的尺寸,无论高度,还是宽度,还有字体,随屏幕的宽度变化!这里是屏幕宽度!是不是想到了vw,对,就是这个意思;——最大程度在各个尺寸屏幕上还原设计稿
目标二、px转换成rem:一般UI给的设计稿宽度大小是750,所以,我们想直接写上面UI标记的尺寸;——最大程度减少工作
为什么选择rem? 很久之前没有vw,怕vw的兼容问题,就用了rem;也就是:rem的兼容性>vw的兼容性; 还有一种就是自己写百分比很不优雅
一、理论基础!
实现目标一
用rem就可以了吧!因为rem就可以随根字体大小改变而改变,从而实现了自适应的功能。 但是,但是,重点来,如果,根字体的大小默认是16px;那么,我们的1rem;就永远是16px,懂么?也就是如果设计稿是750(放大了一倍,iphone是375pt),我们想要个50%的大小: 50%*357px/16=11.718rem 如果我们写一个11.718rem的宽度,然而这只能在能iphone6还原设计稿,也就是只有在iphone6上这样的宽度才刚好占一半; 那么问题来了,如果在每个屏幕上都是50%呢,直接改变根字体大小(16px)不就完了么!!;11.718rem永远还是那个11.718rem,不用担心;
实现目标二、
用工具,webpack,postcss,postcss-pxtorem
二、准备主要工具!
viewport: 建议自行百度;
这里,我想说的是完全可以用vw去设置根字体大小,26px/375px=4.267vw;就不用js去算了! html{font-size:4.267vw}; //因为这个字体大小完全是随屏幕正比变化;
四、vw——开始干! vw的方案就简单多了,因为vw本来就相对屏幕的百分比,所以我们不用再去动态的改变根字体大小了,只需要把750上的px大小转换成对应的vw值就完了,这一步交给postcss工具就可以! 所以只需要两步! 第一步,先用vue-cli快速构建出一个项目,然后,安装postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url
第二步,在项目根目录下添加.postcssrc.js文件,在里面写上
module.exports = { “plugins”: { “postcss-import”: {}, “postcss-url”: {}, “postcss-aspect-ratio-mini”: {}, “postcss-write-svg”: { utf8: false }, “postcss-cssnext”: {}, “postcss-px-to-viewport”: { viewportWidth: 750, unitPrecision: 3, viewportUnit: ‘vw’, selectorBlackList: [’.ignore’, ‘.hairlines’], minPixelValue: 1, mediaQuery: false }, “postcss-viewport-units”: {}, }}
复制代码
viewportWidth是你设计稿的大小750,然后unitPrecision是vw值保留的小数点个数;
五、总结!
首先明白一件事:px就像cm一样,1px永远是1px;1cm永远是1cm; 那么我们从目标再反推一道逻辑: 我们想要的结果很简单: 一个元素的宽度(px) / 屏幕宽度(px) = 定值 (这个定值就是设计稿上面的值比例定值);
——所以要做就是:屏幕变宽,要让元素宽度就变宽。 然鹅,我们写的代码里面的px是不可能变的(取的750设计稿上面的尺寸);那么postcss编译出来的rem值也是不变的;
我们是怎么把设计稿里面的40px换算成相应rem的呢;你只要记住根字体大小的值(浏览器的默认是16px,现在设置成的32px)就是1rem;这交给工具同一去算; 得到:元素的宽度(px) = 元素的宽度(rem) ✖️32; 所以这个32是你必须要设置在postcss-pxtorem里面的;这样它就可以帮你算; 又因为: 元素的宽度(rem) ✖️ 根字体大小(px) = 元素的宽度(px) 元素的宽度(px) 变大, 元素的宽度(rem) 不变,那就只有改变根字体大小(px) ,变大;具体怎么变,上面的js代码已经解释了;
——所以我们做的就是:屏幕变宽,让根字体大小(px) 变宽,元素宽度就变宽。 750屏幕下是写的样式大小是1:1, 所以 又因为我们想要:根字体大小(px) / 屏幕宽度(px) = 32 / 750
所以: 根字体大小(px) = 32 / 750 ✖️ 屏幕宽度(px)
一个元素的宽度(px) / 屏幕宽度(px) = 定值 → 根字体大小(px) ✖️元素的宽度(rem)/ 屏幕宽度(px) → 32 / 750 ✖️ 屏幕宽度(px) ✖️元素的宽度(rem)/ 屏幕宽度(px) 等于什么?? 得到的的是一个与屏幕大小无关的定值!
化简: 元素的宽度(rem)✖️32 / 750 = 元素的宽度(px) / 750 ——不就是设计稿上面的比例么!!!
验证以上操作出来的结果是否符合预期也很简单: 比如一个img的宽,高,在iphone6上的尺寸(审查元素的大小!px单位): 根字体:16px; postcss算出来的rem值是2.5rem; 2.516=40px; 实际上也是40px; ——得到元素实际大小 40✖️40(px), 屏宽是375;比例是40/375=0.10667; 在iphone5上的尺寸(审查元素的大小!px单位): 根字体:13.6533px; postcss算出来的rem值是2.5rem; 2.513.6533=34.13px; 实际上也是34.13px; ——得到元素实际大小 34.13✖️34.13(px), 屏宽是320;比例是34.13/320=0.10665;
2,自己项目适配配置(实践)
上的文章讲的理论和方法是可行的,自己项目的解决方案和他大同小异(主要用rem): 1,插件:amfe-flexible + postcss-px2rem amfe-flexible:自动根据不同设备改变data-dpr的值,这样就可以根据不同的data-dpr设置字体大小不变,仅放大相应倍数。
postcss-px2rem:打包的时候把项目里面的px统一转换成rem,转换的基准值根据配置设置的(.postcssrc.js) /因为我是以750px(iphone6)宽度为基准,所以remUnit为37.5/
经过试验结果:
postcss-px2rem:只负责把项目里面的px按照基准值转换成rem,并不负责根节点动态font-size的计算。
例如,代码里面有个高度固定:180px, 基准值是:37.5, 那最后界面上的rem=180/37.5=4.8rem 不管换不同客户端手机,不同分辨率,界面上都是固定4.8rem【rem的值是固定的,根据根节点的font-size不同,在界面显示的px也不同】,界面上显示的px = 16(没有设置font-size的话默认是16px)* 4.8rem = 76.8px
【那么这个基准值:37.5怎么来的:
rem基准值计算 关于rem的基准值,也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的,主要有以下几点原因: 1.由于我们所写出的页面是要在不同的屏幕大小设备上运行的,所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定;假如我们拿到的视觉稿是以iphone6的屏幕width=375px为基准: ar docEl = document.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10; 这样计算出来的rem基准值就是37.5(iphone6的视觉稿),这里为什么要除以10呢,其实这个值是随便定义的,因为不想让html的font-size太大,当然也可以选择不除,只要在后面动态js计算时保证一样的值就可以
】
上面的组件只负责转换rem,并没有根据不同设备设置font-size,下面再加入这个组件amfe-flexible:
不同设备下的font-size不同。