目前不少网站都是采用了响应式自适应页面的设计了,根据访问设备的不一样,显示不一样的内容。可是仍是会有一些节奏比较慢的网站,仍是PC页面和手机PAD页面不一样的访问域名。正好我这里有个须要,同一个域名要根据不一样的访问设备显示PC页面或者手机页面,这里收集两个比较简洁的方法,都是经过JS代码实现的。javascript
第一个:css
<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>
第二个:java
这一个是两段代码,分别放到PC页面网页和手机页面网页,实现不一样设备访问不一样页面都能实现调整,好比电脑访问了手机页面的地址也会跳转到PC页面上来。android
首先是放入PC页面的代码:ios
<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>
下边是放入手机页面的代码:web
<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>