移动端全屏滚动页面（fullPage）的适配问题

Posted 2023-05-07

参考技术A 之前把这种一屏一屏滚动的页面，叫过锁屏，叫过滑动，就是没有找到一个标准的叫法。后来查了一些资料，也确实没有标准的定义。只是有个插件叫fullPage，比较符合，然后中文就是全屏滚动了。也讨教了另一个前端同伴，他也说就叫fullPage吧。然后就这么愉快的决定给它叫做全屏滚动了！

如今，经常能看见这种网站，这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次！感觉开始的时候pc较多，后来发展到移动端。简单的说，全屏滚动就是整个页面从上到下由多个部分组成，每个部分都正好占满一个屏幕。用户可以滚动鼠标滚轮（移动端为滑动），每次滚动（滑动）都会从一个部分滚动到另一个部分。因为要设置每个部分的内容都是占满一个屏幕的，所以一般都是添加一些简单的内容。移动端更是必须的，移动端的设备杂乱，屏幕大小尺寸不同，分辨率不同，那么要想在每个设备上都呈现完美的状态，简直是不可能的。

我们正在做的全屏滚动页面呈现的内容就是比较多的，是按照iphone6的尺寸做的。由于布局样式用了rem和flexible适配，内容会随着屏幕而放大或者缩小。在iphone5上效果还是可以的，而iphone4就完全不行，有一部分内容被遮掉了。经过媒体查询iphone4手机也可以了。而面临着更严峻的问题是还有好多五花八门的尺寸。 安卓和ios常用尺寸 ，接下来选取了这个链接给提供的安卓和ios常用的前五种尺寸做适配。这样除了iphone4、5、6之外还要调试十种尺寸，感觉真是路漫漫其修远兮。然后就有了一个这样的思考，这十种尺寸的比例是不是一样呢，如果比例一样，是不是可以按比例进行媒体查询呢，如果可以就不用调试十种了。

十种尺寸里面有七种尺寸的比例都是1:1.7多的，最后找到了按比例查询的css即显示区域宽高比（aspect-ratio）此值只支持正整数，因此下面我把1:1.7各乘以10写为10:17。也是支持min和max的。另外还有设备宽高比（device-aspect-ratio）。

全屏滚动页面的适配问题还需要根据页面的需求情况去做相应的适配，并没有说写上一行样式，所有适配就都解决了的方法。感觉说的和废话一样呢？主要是想介绍按比例的媒体查询样式的，其他还有好多以前没用到过的查询方法可以参考 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

fullpage.js全屏滚动插件使用方法

在移动端经常会用到全屏滚动插件，实现常见H5活动页的效果，fullpage是一个很不错的jquery全屏滚动插件

fullpage.js插件的API：http://www.dowebok.com/77.html

常用使用方法：

// 配置示例
$.fn.fullpage({    
    anchors:["page1","page2","page3"],
    slidesColor:["#fff","#000","#333"]   
})

//方法调用示例
//moveTo(section, slide)设置屏幕滚动到某个section或slide,两个参数都是某个内容块的索引值或者是锚文本，默认情况下slide的索引被设置为0。
$.fn.fullpage.moveTo(1,0)  //有动画效果
$.fn.fullpage.silentMoveTo(1,0) //没有动画效果

//回调函数
$(‘#fullpage‘).fullpage({
    anchors: [‘firstPage‘, ‘secondPage‘, ‘thirdPage‘, ‘fourthPage‘, ‘lastPage‘],
    slidesColor:["#fff","#000","#333","#666","#999"],
    
// 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数。
// anchorLink 是锚链接的名称
// index 是section的索引，从1开始计算
    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }
        //using anchorLink
        if(anchorLink == ‘secondSlide‘){
            alert("Section 2 ended loading");
        }
    }
// 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数
// index 是离开的“页面”的序号，从1开始计算；
// nextIndex 是滚动到的“页面”的序号，从1开始计算；
// direction 判断往上滚动还是往下滚动，值是 up 或 down。
    onLeave: function(anchorLink, index){
         var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 && direction ==‘down‘){
            alert("Going to section 3!");
        }
        else if(index == 2 && direction == ‘up‘){
            alert("Going to section 1!");
        }
    }
});

找到一个很不错的帮助文档：帮助文档