最近遇到的一些问题——IE和移动端

Author Avatar
Hugh 9月 11, 2016

最近在工作中遇到一点问题，主要是IE和android4.4以下的兼容问题，在这种时候，好想和产品说，扔了IE，扔了低版本的android吧，下面总结了以下遇到的一些问题。

IE中的console

在前端开发中，大家都喜欢用console来输出一点调试信息，console并不是js原生的对象，而是浏览器的全局对象，所以不同的浏览器有不同的表现，当然，除了IE之外，其实大多数浏览器对于console表现是差不多的，对的，除了IE，低版本的IE，比如IE8/9,是没有Windows.console对象，所以当你在代码中用console.log()输出信息时，chrome和ff可能没啥关系，但是IE就会报错，当然也不是说不能用，IE8/9下，其实也是有console，只不过只有在你打开开发者工具时，才有效，所以平时用console的时候，记得用if (window.console) { … }包住console.log()动作，如果你的网页可能在IE8/9下被打开的话。

IE下的setTimeout

setTimeout同样是我们经常会用到的全局函数之一，一般我们可能会这样用它：

setTimeout("alert('hello world')",5000)

当然，将代码以字符串的形式传递过去似乎是不太好，我们可能会这样， 

function toast(){
    alert('hello world');
}
setTimeout(toast,5000);

然后，如果有参数需要传递的，就作为函数的第三个参数传递，像这样

function toast(text){
    alert(text);
}
setTimeout(toast,5000,'hello,world');

然而，以上这种setTimeout(func,millisec,lang)，在IE下是行不通的，没错，所以在IE下我们要想这样只能 

function toast(text){
    alert(text);
}
setTimeout("toast('hello,world')",5000);

一旦想要用变量来传递参数的时候就只能拼接字符串啦。 

function toast(text){
    alert(text);
}
var text =" hello world";
setTimeout("toast("+text+")",5000);

android下字体小于12px，垂直居中

这里我们先提一下，Chrome默认设置了最小字体，一般为12px，也就是你再PC的chrome中能看到的字体最小就是12px，这个一般也没问题，但总有视觉设计师觉得小于12px的字体才是王道，所以我们如何在PC端实现小于12px的字呢，-webkit-text-size-adjust:none这个已经不能用了，我们可以采用缩放的方式来实现，比如实现9px的字

.font {
font-size: 18px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin:0 0;//左上角为中心缩放
transform-origin:0 0；
}

利用scale来缩放，这个相对比较简单实用，当然也会有一定问题， 比如占位的问题，缩放是缩放了，但是占据的文档流的位置还是缩放前的空间大小。

相对于PC端，移动端的浏览器就没有字体大小的限制了，但是这里就又有一个问题了，垂直居中的问题，当我们在PC端要实现文字垂直居中，多简单，line-height设的和height一样就好了，但是一旦字体小于12px，再用line-height就不好使了，总是会忽高忽低的，这种时候我们最好的办法是。。。让视觉修改，，把字体给我弄到12px以上！！，好吧，开玩笑，还是可以用scale来把字体先放大，垂直居中，然后再缩小。

.font {
height：40px;
font-size: 18p;
line-height：40px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

如果还没居中的话可能就是奇偶数的关系了，上下不能平分那也是没办法的事。

移动端的1px

移动端开发的时候，由于devicePixelRatio的存在（设备上物理像素和设备独立像素的比例），我们无法直接做到1px的border，凡是被你设置为1px的，在移动端看起来就会变成2px，这种时候我们想实现1px的边框还是要靠我们的缩放scale,下面是实现的less代码。

.borderline{
    position: relative;
    &:after {
        border: 1px solid #000000;
        .border-style();
    }
}

.border-style(){
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    box-sizing: border-box;
    pointer-events: none;

}

android4.4以下的height

这个是我遇到的比较奇怪的问题，低版本的android下，当我对img设置了height：100%时（外层div设置了height),并没有生效，height变为0；
原因也不清楚，大概是低版本android的问题。

expand_less