userAgent判断客户端浏览器来自PC还是移动端

今天在三思悦网站通过微信上分享了一篇关于婴幼儿教育的帖子,等来到公司自己点进去一看,彻底凌乱了,看上去很多余的页头,样式完全错乱了,还有画蛇添足的页脚....

移动浏览器可视化范围很小,所以充分利用有限的空间去展示有价值的东西,页头,页脚,侧边栏都是可以弱化,甚至不显示效果更佳.

下面进行优化改造,我打算采用js来分辨pc浏览器还是移动端浏览器,pc端浏览器和移动客户端浏览器是通过 userAgent 来分辨,直接上代码:

navigator.userAgent.match(/Android/i)  //安卓客户端浏览器
navigator.userAgent.indexOf('iPhone') != -1)  //iPhone手机客户端
navigator.userAgent.indexOf('iPod') != -1)   //iPod 客户端
navigator.userAgent.indexOf('iPad') != -1    //iPad 客户端

当然这些userAgent完全可以代码指定,也就是说你可以用pc浏览器去模拟一个移动客户端浏览器,貌似也这也没啥意义,可以测试玩一玩,chrome 浏览器默认支持移动客户端预览视图.

有了上面的判断条件,你需要在移动客户端异常那些页面框架就非常简单了.jquery就一句代码搞定.

$(function(){
	if(navigator.userAgent.match(/Android/i)||(navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
       $("#common_header,#common_navbar,#backtotop,#footer").hide();
     }
})