ホームページ > ウェブフロントエンド > jsチュートリアル > ユーザーがPCでアクセスしているかモバイル端末でアクセスしているかをjsはどのように判断するのでしょうか_javascriptスキル

ユーザーがPCでアクセスしているかモバイル端末でアクセスしているかをjsはどのように判断するのでしょうか_javascriptスキル

WBOY
リリース: 2016-05-16 16:51:11
オリジナル
1394 人が閲覧しました

最近、私たちはモバイル プラットフォームに優れたエクスペリエンスを提供するチームのプロジェクト「Coffee Wings」に取り組んでいます。 Android プラットフォームの急速な発展に伴い。国内のスマートフォン業界を牽引しただけでなく、多くの国内開発者も Android モバイル端末の波に加わり始めています。見逃したインターネットの大きな波がたくさんある場合。そうなると、この Android の波を絶対に逃すことはできません。現在、「Wings of Coffee」用のモバイル端末と Android クライアントを開発しています。Android または IOS オペレーティング システムを搭載した携帯電話を使用している場合は、ドメイン名 www.sygxy.cn に直接アクセスして、モバイル端末の効果を確認できます。同時に、Androidクライアントはテンセントの「App Store」や「Baidu Mobile Assistant」などのアプリケーションモールに掲載された。 「Coffee Wings」を直接検索してダウンロードできます。宣伝も何もしていないのに、店頭に並んでから 1 週間しか経っていないのに、すでに 100 件以上ダウンロードされています。

モバイル端末を最適化する必要がある場合、クライアントのアクセス デバイスが何であるかを判断する必要があります。判定結果に基づいて、未解決のドメイン名のアドレスが返され、別の CSS ファイルが読み込まれます。

使用する判断方法はユーザーエージェント値に基づいています。 JavaScript フレームワークの Navigator オブジェクトの userAgent プロパティを使用します。ナビゲータ オブジェクトには公的標準はありませんが、市場のすべてのブラウザでサポートされています。 userAgent 属性を使用して、クライアントからサーバーに送信されたユーザー エージェント ヘッダーの値を返します。ヘッダー情報には User-Agent があり、その機能はユーザーのクライアントがどのブラウザであるか、およびオペレーティング システム情報をサーバーに伝えることです。正規表現を使用してユーザー エージェント値を取得します。この一致する値は、Android、ios などのモバイル オペレーティング システム、またはブラウザーの名前である可能性があります。一致するものがあればジャンプします。一致しない場合はジャンプせず、直接 PC のホームページに移動します。

Web サイトの移植性を向上させるために、特定のコードの実装には JavaScript スクリプト言語を使用します。著者の意見では、このテクノロジーを使用する利点は 2 つあります

1: Web サイトのポータビリティを向上させることができます。将来の Web プロジェクトで、私たちのチームがモバイル端末の効果を再度追加する必要がある場合、それが可能です。 JS コードのこの部分を簡単に導入して判断することができます。今後の作業効率を向上させます。

2: 2 番目のポイントは、さまざまなインターフェイスでの Web プログラムのロードを容易にするため、モバイル端末の判定コードのこの部分を導入するかどうかです。

具体的な実装:

クライアント端末でアクセスを判定する必要があるページは、直接<script></script>を使用して導入します。ページ上でスクリプトプログラムを実行する場合、具体的な判定コードは次のとおりです:

コードをコピーします コードは次のとおりです:

function uaredirect(f ){
try{if(
document.getElementById("bdmark")!=null){
return
}
var b= false;
if(arguments[1] ){
var e=window.location.host;var a=window.location.href;
if(isSubdomain(arguments[1],e)== 1){
f=f "/#m/" a;b=true}else{if(isSubdomain(arguments[1],e)==2){f=f "/#m/" a; b=true}
else{f= a;b=false}}}
else{b=true}if(b){var c=window.location.hash;
if(!c. match("fromapp")){
if((navigator.userAgent.match(/(iPhone|iPod|Android|ios|Windows Phone)/i))){location.replace(f)}}}}catch (d)
{
; }
}
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート