面试的时候被要求制作一个移动端的包含上拉加载页面,在制作过程中发现了上拉加载移动端与pc端的不兼容问题。
1.上拉加载代码
http://119.28.193.164/2018/03/06/jquery上拉加载更多/
2.在编辑完代码后在pc端浏览器中测试,上拉加载是能实现的,但是在移动端的浏览器以及微信中打开都是没有效果的。
百度后发现有可能是移动端页面对下拉条的判断出错,要在打开页面时强制全屏显示,于是加入代码:
<!– 启用 WebApp 全屏模式 –>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<!– uc强制竖屏 –>
<meta name=”screen-orientation” content=”portrait”>
<!– UC强制全屏 –>
<meta name=”full-screen” content=”yes”>
<!– UC应用模式 –>
<meta name=”browsermode” content=”application”>
<!– QQ强制竖屏 –>
<meta name=”x5-orientation” content=”portrait”>
<!– QQ强制全屏 –>
<meta name=”x5-fullscreen” content=”true”>
<!– QQ应用模式 –>
<meta name=”x5-page-mode” content=”app”>
之后发现,移动端页面确实有效果,但是在微信端中依旧没有效果
查询无果的情况下,暂时放弃自己手打代码,引入dropload插件,教程地址
http://blog.****.net/qq_29447481/article/details/69499944
使用之后发现依然不能实现,于是查看官方的实例,发现
<meta name=”viewport” content=”initial-scale=1, user-scalable=0, minimal-ui” charset=”UTF-8″>
而我一直使用sublime编辑,所以这行代码是
<meta charset=”UTF-8″ />
修改后在微信端也能显示效果了