最近做一个兼容三端的门户项目，采用的方式是通过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)
}
*********************************************
关于适配问题的兼容待更新........
*********************************************
6、某些情况下tap事件有点透的bug，而click事件在ios端是没有效果的，这个时候在改元素上加上cursor：pointer即可。
7、很多框架比如mui都会有默认的 -webkit-user-select: none;样式，会导致input等输入框在ios上出现无法选中的问题
解决是在元素上加-webkit-user-select: text;
8、检测平台（区分手机和pad）
if(navigator.userAgent.match(/mobile/i)) {
create_data.vars.ds_type = 0;
}
if(navigator.userAgent.match(/iPad/i)) {
create_data.vars.ds_type = 1;
}