网页适配

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

attention：目前没有发现bug，但是不排除其bug存在的可能性

 

 

转载于:https://www.cnblogs.com/bber/p/10006332.html