H5中不同设备访问跳转到对应的适配页面
目前很多网站都是采用了响应式自适应页面的设计了,根据访问设备的不同,显示不同的内容。但是还是会有一些节奏比较慢的网站,还是PC页面和手机PAD页面不同的访问域名。正好我这里有个需要,同一个域名要根据不同的访问设备显示PC页面或者手机页面,这里收集两个比较简洁的方法,都是通过JS代码实现的。
第一种方法:
<script type="text/javascript"> var userAgent = navigator.userAgent.toLowerCase(); var platform; if(userAgent == null || userAgent == ''){ platform = 'WEB' ; }else{ if(userAgent.indexOf("android") != -1 ){ platform = 'ANDROID'; location.href = "http://m.kuegou.com/"; }else if(userAgent.indexOf("ios") != -1 || userAgent.indexOf("iphone") != -1 || userAgent.indexOf("ipad") != -1){ platform = 'IOS'; location.href = "http://m.kuegou.com/"; }else if(userAgent.indexOf("windows phone") != -1 ){ platform = 'WP'; location.href = "http://m.kuegou.com/"; }else{ platform = 'WEB' ; location.href = "http://www.kuegou.com/"; } } </script>
直接上代码,修改代码中你的PC页面和手机页面地址即可。(代码中的platform值对应的是设备类型,修改跳转目标地址即可实现自动跳转)
第二种方式:
<script type="text/javascript"> var url = window.location.pathname; var wapurl="http://3g.xxx.com"+url; if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ if(window.location.href.indexOf("?mobile")<0){ try{ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ window.location.href=wapurl; }else{ window.location.href=wapurl; } }catch(e){} } } </script>
下边是放入手机页面的代码:
<script type="text/javascript"> var url = window.location.pathname; var pcurl="http://www.xxx.com"+url if(/AppleWebKit.*Mobile/i.test(navigator.userAgent)==false || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))==false){ if(window.location.href.indexOf("?mobile")<0){ try{ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)==false){ window.location.href=pcurl; } }catch(e){} } } </script>