不想通過CSS自適應(yīng)在PC端和移動端分別顯示不同的樣式,那么只能通過在移動端訪問PC端網(wǎng)頁時跳轉(zhuǎn)到對應(yīng)的移動端網(wǎng)頁了,那么怎么跳轉(zhuǎn)呢,網(wǎng)上也有很多文章說明,以下實現(xiàn)思路經(jīng)過小編測試過,放心使用。
1.效果圖
PC端訪問顯示:

移動端訪問顯示:

2.實現(xiàn):
不考慮移動端搜索引擎優(yōu)化的話,只需要通過JS判斷是否移動端,然后確定是否跳轉(zhuǎn)到指定頁面就行了,主要JS如下:
//判斷是否移動端,如果是則跳轉(zhuǎn)到指定的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);}}然后在頁面引用JS,調(diào)用方法就行了:
<script src="../js/wap.js"></script><script type="text/javascript">browserRedirect("http://ycdoit.com/test/testmobile.html");</script> 武林網(wǎng)友情提醒:大家可以用PC端和移動端訪問測試頁面演示效果哦!
關(guān)于本文給大家介紹的基于JS實現(xiàn)移動端訪問PC端頁面時跳轉(zhuǎn)到對應(yīng)的移動端網(wǎng)頁就給大家介紹這么多,希望對大家有所幫助!
新聞熱點
疑難解答