If you don’t want to display different styles on the PC and mobile terminals through CSS adaptation, you can only jump to the corresponding mobile website when accessing the PC web page on the mobile terminal. So how to jump? There are also many articles on the Internet to explain the following implementation ideas. The editor has tested them and can be used with confidence.
1. Effect picture
PC access display:
Mobile access display:
2. Implementation:
If you do not consider mobile search engine optimization, you only need to judge whether the mobile terminal is mobile through JS, and then determine whether to jump to the specified page. The main JS is as follows:
//Judge whether it is a mobile terminal. If so, jump to the specified URL address function browserRedirect(url) {//Read-only string, declaring the value of the user agent header used by the browser 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 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 refer to 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>Wulin netizens reminded: You can use PC and mobile to access the test page to demonstrate the effect!
Regarding the JS-based mobile access page that this article introduces to you, I will jump to the corresponding mobile web page when accessing the PC page based on JS. I will introduce so much to you. I hope it will be helpful to you!