Detailed explanation of some precautions for JS jump to mobile website URL

This article mainly shares with you some detailed examples of precautions for JS to jump to the mobile website URL. I hope it can help everyone.

The original intention of the design of our mobile site platform is to connect with our existing PC site platform. Simply put, all our users used to use our PC site service. Now they can get a website with the same data as the PC site. mobile site. The key point is that old users don’t need to pay, it’s free. (Customers of the PC website are a little excited when you think about it.) After being online for a while, I feel that many customers are still very interested. They have installed this and that QR code scanning software on their mobile phones, and they are facing the mobile phone. Scan and scan the QR code of the website.

Let’s get to the point:

Without further ado, many customers came here because of our reputation. It turned out that our customers who were not PC customers bought our mobile station service, which resulted in the How can the PC site jump to the mobile site?

I think it is a good method to obtain the client's navigator.userAgent through javascript and then use url jump.

Let's go - code:

var isMobile = {
  Android: function() {
    return navigator.userAgent.match(/Android/i) ? true : false;
  },
  BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i) ? true : false;
  },
  iOS: function() {
    return navigator.userAgent.match(/iPhone|iPod/i) ? true : false;
  },
  Windows: function() {
    return navigator.userAgent.match(/IEMobile/i) ? true : false;
  },
  Linux: function() {
    return navigator.userAgent.match(/Linux/i) ? true : false;
  },
  any: function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows() || isMobile.Linux());
  }
};
setTimeout(function() {
  if (isMobile.any()) {
    var body = document.getElementsByTagName('body');
    body[0].style.display='none';
    location.href = "http://m.某某.com/";
  }
}, 10);

Simple analysis:

1. On which devices do you need to jump to the URL?

Under XP, win7 and mac, mobile site jump is generally not done.

Android, BlackBerry, iOS, Windows mobile (phone), Linux and other systems on the market are commonly used mobile operating systems. Firefox's webOS, "ancient times" Nokia Symbian, etc. seem to have no market at home and abroad, so don't think about it.

2. What are the problems when the page jumps?

1. The original PC website may need to load a lot of resources. The page of the PC website may have been rendered before jumping to the URL. The jump effect is too blunt.

Answer: After js obtains the characteristics of the terminal , immediately set the body to hidden

2. Use window.onload or setTimeout?

Answer: I choose when to execute setTimeout, but the abominable window.onload requires me to wait for all resources to be downloaded before executing my method, so I recommend using setTimeout();

Summary:

Regarding the judgment of the terminal device, the above code is very superficial and makes an embarrassing url jump. This is a last resort. If the server determines the device characteristics based on the client's request header information, it is a better choice to return different resources accordingly.

Related recommendations:

Summary of js jump methods and codes

javascript - Use php to get a JS jump Transferred final URL

Two solutions to the problem of missing referrer in JS jump in IE_javascript skills

The above is the detailed content of Detailed explanation of some precautions for JS jump to mobile website URL. For more information, please follow other related articles on the PHP Chinese website!