最近做一個相容三端的門戶專案，採用的方式是通過layui以及媒體查詢做適配，發現一些需要注意的小tips。

1、網頁的滾動條我設定在頁面內的div裡，但是發現這到了移動端明顯是不適用的，在qq自帶的（我使用的是小米手機）瀏覽器上，頁面滾動顯得不夠流暢，並且總是會帶動頂部的瀏覽器重新整理容器，所以滾動條不能設定在裡面的div。

 

2、移動端頁面不能共用網頁的click事件，在ios裝置上無效，可以使用如下統一事件做兩種情況的相關配置：

/*分為tap和click*/ $('body').on('click', '*[att-event]', function (e) { 　　var othis = $(this), methid = othis.attr('att-event'); 　　wealth_center_events[methid] ? wealth_center_events[methid].call(this, othis, e) : ''; 　　return false; });   //監聽事件 wealth_center.prototype.on = function (events, callback) { 　　if (typeof callback === 'function') { 　　　　call[wealth_center_events] ? call[wealth_center_events].push(callback) : call[wealth_center_events] = [callback]; 　　} 　　return this; };   3、圖片載入： var lay_index_load = layer.load(1);

var url = tool.getUrlHost() + '****.png',
img = new Image();

img.src = url;
img.onload = function(){
　　layer.close(lay_index_load);
　　$(".home_index_center_viedio").css({
　　　　'background': 'url(***_06.png) no-repeat',
　　　　'background-size': '100% 100%'
　　});
　　$(".home_index_box_top").fadeIn();
　　$(".home_index_center_viedio").addClass('layui-anim layui-anim-scale');
}

 

4、

//平臺、裝置和作業系統
var system ={
win : false,
mac : false,
xll : false
};
//檢測平臺
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

if(system.win || system.mac || system.xll) {//非手機裝置

　　

}else {//手機裝置（包括pad）

 

}

 

5、自適應的輪播外掛(有時間軸概念寫法)

portal_init.vars.mySwiper1 = new Swiper("#info_lunbo_one", {
　　loop: true, // 迴圈
　　effect: 'coverflow', // 切換效果
　　grabCursor: true,
　　centeredSlides: true, // 活動塊居中
　　pagination: '.swiper-pagination',

　　//slidesPerGroup: slides_perView, //2張圖片為一組

　　//spaceBetween: '6%', // slider之間的距離

　　//centeredSlides: false,
　　slidesPerView: 2, // 只顯示三張圖片
　　slideToClickedSlide: true, // 點選的圖片居中
　　autoplayDisableOnInteraction: false,
　　initialSlide: 1,//預設顯示第二張
　　autoplay: true,
　　coverflowEffect: {
　　　　rotate: 0, // 旋轉角度
　　　　stretch: -10, // 拉伸 圖片間左右的間距和密集度
　　　　depth: depth, // 深度 切換圖片間上下的間距和密集度
　　　　modifier: 3, // 修正值 該值越大前面的效果越明顯

　　　　slideShadows: false // 頁面陰影效果
　　},
　　navigation: {
　　　　nextEl: '.hm_carousel_box .swiper-button-next',
　　　　prevEl: '.hm_carousel_box .swiper-button-prev'
　　},

　　on: {

　　　　//與時間軸聯絡起來（span小標籤）
　　　　slideChange: function () {
　　　　　　let index = this.activeIndex;
　　　　　　$(".hm_carousel_timeline_di").removeClass("hm_carousel_timeline_da");

　　　　　　$(".hm_carousel_timeline_list:eq(" + (index - 2) + ")").find(".hm_carousel_timeline_di"). addClass("hm_carousel_timeline_da");
　　　　　　portal_init.time_line_in_center(index - 2);

　　　　}

　　}
})

//點選時間軸：

 function  hm_carousel_timeline_list(othis, event) {

　　var index = othis.index(),
　　speed = 500,
　　index_this = index + 2;//輪播圖開始的兩張用於迴圈，從第三張開始為真正的第一張

　　portal_init.vars.mySwiper1.slideTo(index_this, speed);

　　//時間軸上面的相關效果切換：（自行設定）

　　$(".hm_carousel_timeline_di").removeClass("hm_carousel_timeline_da");
　　othis.find(".hm_carousel_timeline_di").addClass("hm_carousel_timeline_da");

　　　time_line_in_center(index);//當前選擇的點居中
}

//首頁輪播圖時間軸當前居中

 function   time_line_in_center (index) {

　　var winow_width = document.documentElement.offsetWidth || document.body.offsetWidth,
　　winow_width_2 = winow_width / 2;

　　var this_position = $(".hm_carousel_timeline_list:eq("+ index +")")[0].offsetLeft,
　　this_position_center = this_position + 30 + winow_width * 0.1;
　　$(".hm_carousel_timeline_position").css('left', winow_width_2 - this_position_center)
}

 

*********************************************

關於適配問題的相容待更新........