Home > Web Front-end > JS Tutorial > body text

Based on JS, jump to the corresponding mobile web page when the mobile terminal accesses the PC page_javascript skills

WBOY
Release: 2016-05-16 15:05:30
Original
1504 people have browsed it

If you don’t want to use CSS adaptive display to display different styles on the PC and mobile terminals, you can only jump to the corresponding mobile webpage when accessing the PC webpage on the mobile terminal. So how to jump? There are also options on the Internet Many articles state that the following implementation ideas have been tested by the editor and can be used with confidence.

1. Rendering

PC access display:

Mobile access display:

2. Implementation:

If you do not consider mobile search engine optimization, you only need to use JS to determine whether it is mobile, and then determine whether to jump to the specified page. The main JS is as follows:

//判断是否移动端,如果是则跳转到指定的URL地址
function browserRedirect(url) {
//只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值
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);
}
}
Copy after login

Then reference JS on the page and call the method:

<script src="../js/wap.js"></script>
<script type="text/javascript">browserRedirect("http://ycdoit.com/test/testmobile.html");</script> 
Copy after login

Friendly reminder from Script House: You can use PC and mobile to visit the test page to demonstrate the effect!

This article introduces you to the JS-based implementation of jumping to the corresponding mobile web page when the mobile terminal accesses the PC page. I hope it will be helpful to you!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!