Based on JS to achieve mobile end of the page to access the PC-side to the corresponding mobile end page _javascript Skills

Source: Internet
Author: User

Do not want to use CSS adaptive to the PC and mobile end of the display of different styles, then only through the mobile end to access the PC side of the Web page to jump to the corresponding mobile Web page, then how to jump it, there are many articles on the Internet, the following implementation of ideas after a small series of tests, ease of use.

1. Effect drawing

PC-Side Access display:

Mobile End Access Display:

2. Implementation:

Regardless of the mobile end of the search engine optimization, only need to determine whether to move the end of JS, and then determine whether to jump to the specified page on the line, the main JS is as follows:

Determines whether to move the end, and if so, jumps to the specified URL address
function browserredirect (URL) {
//read-only String that declares the browser's value for the user agent header used for HTTP requests
var Suseragent = Navigator.userAgent.toLowerCase ();
var Bisiphoneos = Suseragent.match (/iphone os/i) = = "iphone OS";
var BISMIDP = Suseragent.match (/midp/i) = = "MIDP";
var bIsUc7 = Suseragent.match (/rv:1.2.3.4/i) = = "rv:1.2.3.4";
var bisuc = Suseragent.match (/ucweb/i) = = "UCWeb";
var bisandroid = Suseragent.match (/android/i) = = "Android";
var bisce = Suseragent.match (/windows ce/i) = = "Windows CE";
var biswm = Suseragent.match (/windows mobile/i) = = "Windows Mobile";
if (Bisiphoneos | | bismidp | | bIsUc7 | | bisuc | | bisandroid | | bisce | | biswm) {
window.location.replace (URL);
}
}

Then when the page references JS, the method is invoked:

<script src= ". /js/wap.js "></script>

Cloud Habitat Community Friendship Reminder: You can use the PC end and mobile end to access the test page demo effect Oh!

About this article for you to introduce the implementation of JS based on the mobile end of the PC page to jump to the corresponding mobile end page to introduce so many people, I hope to help you!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.