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); } }
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>
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!