首頁 > web前端 > js教程 > 基於JS實作行動端存取PC端頁面時跳到對應的行動端網頁_javascript技巧

基於JS實作行動端存取PC端頁面時跳到對應的行動端網頁_javascript技巧

WBOY
發布: 2016-05-16 15:05:30
原創
1604 人瀏覽過

不想透過CSS自適應在PC端和行動端分別顯示不同的樣式,那麼只能透過在行動端存取PC端網頁時跳到對應的行動裝置網頁了,那麼怎麼跳轉呢,網路上也有很多文章說明,以下實作思路經過小編測試過,放心使用。

1.效果圖

PC端存取顯示:

行動裝置存取顯示:

2.實作:

不考慮行動端搜尋引擎最佳化的話,只需要透過JS判斷是否行動端,然後決定是否跳到指定頁面就行了,主要JS如下:

//判断是否移动端,如果是则跳转到指定的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,呼叫方法就行了:

<script src="../js/wap.js"></script>
<script type="text/javascript">browserRedirect("http://ycdoit.com/test/testmobile.html");</script> 
登入後複製

腳本之家友情提醒:大家可以用PC端和行動端存取測試頁示範效果哦!

關於本文給大家介紹的基於JS實現移動端訪問PC端頁面時跳到對應的移動端網頁就給大家介紹這麼多,希望對大家有所幫助!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板