手机访问PC网站自动跳转到手机网站JS代码——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
手机访问PC网站自动跳转到手机网站JS代码

发布作者:萧强   发布时间:2016-04-21   阅读次数:4644

4G时代,手机网站已经非常普遍了,一般手机网站都有一个二级域名来访问,比如 m.w3cdream.com 如果手机直接访问www.w3cdream.com 就是PC网站,在手机上浏览电脑版网站体验非常不好。

如果能够手机访问PC端电脑网站自动跳转到手机网站就好了:

代码如下:

将以下代码放在首页区

<SCRIPT LANGUAGE="JavaScript">
 function mobile_device_detect(url)
 {
        var thisOS=navigator.platform;
        var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
 for(var i=0;i<os.length;i++)
        {
 if(thisOS.match(os[i]))
        {  
  window.location=url;
 }
          
 }
 //因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认
 if(navigator.platform.indexOf('iPad') != -1)
        {
  window.location=url;
 }
 //做这一部分是因为Android手机的内核也是Linux
 //但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手,即用navigator.appVersion信息做判断
  var check = navigator.appVersion;
  if( check.match(/linux/i) )
          {
   //X11是UC浏览器的平台 ,如果有其他特殊浏览器也可以附加上条件
   if(check.match(/mobile/i) || check.match(/X11/i))
                 {
   window.location=url;
   } 
 }
 //类in_array函数
 Array.prototype.in_array = function(e)
 {
  for(i=0;i<this.length;i++)
  {
   if(this[i] == e)
   return true;
  }
  return false;
 }
 }
mobile_device_detect("http://m.w3cdream.com");
</SCRIPT>
倒数第二行中的 http://m.w3cdream.com 就是要跳转到的手机版网址。


还有一种比较简单的JS代码,测试也可以的

<script type="text/javascript">
try {
var urlhash = window.location.hash;
if (!urlhash.match("fromapp"))
{
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)))
{
window.location="http://m.w3cdream.com/";
}
}
}
catch(err)
{
}
</script>
第三款代码:

<script type="text/javascript">
// JavaScript Document
function urlredirect() {
    var sUserAgent = navigator.userAgent.toLowerCase(); 
    if ((sUserAgent.match(/(ipod|iphone os|midp|ucweb|android|windows ce|windows mobile)/i))) {
        // PC跳转移动端
        var thisUrl = window.location.href;
        window.location.href = thisUrl.substr(0,thisUrl.lastIndexOf('/')+1)+'mobile/';
         
    }
}
urlredirect();
</script>
以上是三种不同的方法,大家可以是试试。

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
上一篇:响应式网站设计原则,前端开发必备知识
下一篇:已经没有下一篇内容了
友荐云推荐

浏览器解决兼容方案

热点文章

新闻资讯

标签云

友情赞助