前端杂记：安卓响应式+下拉加载

 安卓响应式

安卓手机端网页响应简单方法：

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width " />

其作用是：指定其显示窗口宽度（device-width：定义输出设备的屏幕可见宽度，可自定义大小）

target-densitydpi=device-dpi：设置目标设备的像素，表示目标设备的像素等级，比如1px=多少像素这样

注意：该代码不兼容ios端，属于android专有的

下拉加载

$(function(){
        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();               //滚动条距离顶部的高度
            //var scrollHeight = $(document).height();           //当前页面的总高度
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();               //当前可视的页面高度
            console.log("滚动条距离顶部的高度:"+scrollTop);
            console.log("当前页面的总高度:"+scrollHeight);
            console.log("当前可视的页面高度:"+windowHeight);
            
            //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
            if(scrollTop + windowHeight >= (scrollHeight-350))  { 
                //因为是手机端网页，所以这边有部分差别，有个默认的下方栏菜单等，所以-350    
                
                //这边写加载语句，比如我是自己写的不断从数据库获取原来的数据再+4条数据这样
                pagenum=pagenum+1;
                getProducts(Truepagenum,pagenum*4);
            }
        });

    });

注意：$(window).scroll() 这个是浏览器滑动时自动执行，但注意当body有设置其height时无效。

           同时这个也可赋给其它拥有滑动条的对象，比如自己设的class->.roll         那么$(“.roll”).scroll()这样