最近做一个兼容三端的门户项目,采用的方式是通过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; }