ホームページ > ウェブフロントエンド > jsチュートリアル > JSをベースにモバイル端末からPCページにアクセスすると対応するモバイルWebページへジャンプ_javascriptスキル

JSをベースにモバイル端末からPCページにアクセスすると対応するモバイルWebページへジャンプ_javascriptスキル

WBOY
リリース: 2016-05-16 15:05:30
オリジナル
1604 人が閲覧しました

CSS アダプティブ表示を使用して PC とモバイル端末で異なるスタイルを表示したくない場合は、モバイル端末で PC の Web ページにアクセスする場合にのみ、対応するモバイル Web ページにジャンプできます。インターネット上のオプションでもあります。多くの記事では、次の実装アイデアは編集者によってテストされており、安心して使用できると記載されています。

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 とモバイルを使用して テスト ページ にアクセスして、効果を実証できます。

この記事では、モバイル端末からPCページにアクセスした際に、対応するモバイルWebページにジャンプするJSベースの実装を紹介します。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート