简介:

该项目并没有动态数据,都是动画的效果。首页四屏,使用fullpage.js搭建基本骨架。其他元素设置动画效果,由于网站设计图为192*1080px,而且需要兼容最小为1366*768px,网页为全屏,最初考虑使用rem来计算各个元素尺寸,但是该项目需要兼容ie8,rem就不太好用了,只能动态计算各个元素的尺寸。rem计算方法如下:

(function(doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    recalc = function(argument) {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
      document.getElementsByTagName('body')[0].style.display = 'block';
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);

其中遇到问题最多的就是,由于页面是全屏的,但是不同浏览器的可视区域并不一致,相对于chrome、Firefox等浏览器,ie和360浏览器的可视区域较小,部分元素并不能完全展示。关于字体的大小,1920下字体如果设置为12px;通过可视区域的比值计算,在1366可视区域,字体应该为12/1920*1366 = 8.5 px;实际浏览器支持最小字号见下文,即使是设计稿,一般也不会低于12px;否则影响阅读,这样的话,小分辨率设备空间有限,产品又没有提供第二套解决方案,所以不同屏幕的适配,略有差异。

1.关于ie8的background-size属性

ie8不支持background-size,可以使用滤镜方法代替,如下:

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" +bgurlIE+",sizingMethod='scale')";

bgurlIE替换为所需要的图片链接。

2.opacity兼容写法

.some_class {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    background: #000;
    color: #fff;
    /* older safari/Chrome browsers */
    -webkit-opacity: 0.5;
    /* Netscape and Older than Firefox 0.9 */
    -moz-opacity: 0.5;
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
    -khtml-opacity: 0.5;
    /* IE9 + etc...modern browsers */
    opacity: .5;
    /* IE 4-9 */
    filter: alpha(opacity=50);
    /*This works in IE 8 & 9 too*/
    /*若需要 -ms-filter 和 filter同时使用,请将 -ms-filter写在前面*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; //first
    /*IE4-IE9*/
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  }

3.css3渐变兼容

.aboutTxt{
    margin-top: 10px;
    position: absolute;
    bottom: -1px;
    width: 100%;
    z-index: 1;
    background: url('@{images}/about/combg.png') repeat-x;//filter 在less中写法报错,可以使用一张透明图片模拟
    background:-webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

不使用css3渐变的属性,可以完全使用图片来模拟。

4.swiper.js兼容ie8

<script>
    var userAgent = navigator.userAgent;
    var isOpera = userAgent.indexOf('Opera') > -1;
    function myBrowser(){
        if ((userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) || (userAgent.indexOf('Trident') > -1)) {
            return 'IE';    
        };
    };
    if ("IE" == myBrowser()) {
        document.write("<script src='js/idangerous.swiper.min.js'><"+"/script>");
        document.write("<script src='js/idangerous.swiper.progress.min.js'><"+"/script>");
    }else{
        document.write("<script src='js/swiper-3.4.2.jquery.min.js'><"+"/script>");
    };
</script>

这里默认ie浏览器都使用swiper 2.x版本,可以再根据ie版本进行针对ie8的设置,判断ie版本号:

function ieVersion(){
    var userAgent = navigator.userAgent;
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    return fIEVersion
};

5.swiper 2.x IE9 不显示最后一张图片

在ie9中,swiper不显示最后一张图片,翻到最后一张图片时,翻页箭头也失去了效果。本身swiper就是针对移动端设计的轮播插件,在ie上效果并不是最好的,其他ie版本勉强可以使用,在ie9下,简单写了一下轮播图的淡入淡出效果:

function roundIE(index){
    $('.swiper-slide').eq(index).stop().fadeIn().siblings().stop().fadeOut();
};

然后再添加对翻页箭头样式的判断和每张图片对应的文字效果就可以了。

6.ie浏览器部分背景图片显示不完整

这个bug有点意思,个别背景图片显示不完整,在加入我们页面,是循环生成的列表的背景图片,但是第二个下边缘显示不完整在ie浏览器下,调整background-position-y属性可以修正,但是问题并不是出在这里,图片显示不完整也并不是有别的元素压盖,最主要的原因就是动态设置font-size出现小数,导致了这个问题,修改为整数就可以了。于是在1920×1080分辨率下,字体大小设置为14px,1366×768分辨率下设置为12px,其他分辨率可以动态设置:fontSize :14/1920 * window.screen.width,另外,background-size也存在同样的问题,使用小数,ie9图片会显示不正常。

7.各个浏览器支持的最小字号(浏览器默认字号,缩放100%)

Chrome 60 :12px;
FireFox 54 :可以设置到0px,为负数时,变为16px;
360浏览器(极速模式):12px,兼容模式参考ie浏览器;
IE 11(edge):可以设置到0px,为负数时,变为16px;
IE 8:可以设置到0px,为负数时,变为16px;
手边没有ie9和ie10,仿真模式下,表现同ie8一致;

8.ie8圆角问题

这个解决可以用图片来模拟,测试了一下网上的引PIE文件的方法,可用,需要以下几个文件:
CityLife Bug 整理-Rome-Web 前端开发博客
在页面中引用如下:

span{
	behavior:url(css/dist/pie/PIE.htc)
}

个别bug可以针对浏览器进行分别设置,这里就不一一列举,文件优化上线之后,会贴出页面地址,待续...