首頁 web前端 js教程 js如何判斷使用者是在PC端和還是行動端存取_javascript技巧

js如何判斷使用者是在PC端和還是行動端存取_javascript技巧

May 16, 2016 pm 04:51 PM
pc端 行動端

最近一直在忙我們團隊的專案“咖啡之翼”,在這個專案中,我們為移動平台提供了一個優秀的體驗。伴隨Android平台的紅火發展。不僅帶動國內智慧型手機產業,許多國內開發者也開始投身於Android行動終端的大浪潮中。如果很多網路大浪潮你錯過了。那麼這個Android浪潮你絕對不能錯過。目前我們為「咖啡之翼」已經開發了行動終端以及安卓客戶端,大家使用Android或IOS作業系統的手機,直接存取網域www.sygxy.cn即可觀看行動終端效果。同時Android客戶端已經上架到騰訊「應用寶」和「百度手機助手」等應用程式商城。大家可以直接搜尋「咖啡之翼」下載。在沒有任何的推廣的情況了,僅僅上架一周,已經擁有超過100 的下載量。

如果需要對行動終端進行最佳化,必須要做的就是,判斷客戶機的存取設備是什麼。通過判斷的結果,返回不能的網域地址,進而載入不同的CSS檔案。

我們使用的判斷方式是透過user-agent值,來進行判斷。使用javascript框架中的Navigator物件的userAgent屬性。 navigator 物件沒有公開標準,不過現在市面上所有瀏覽器都支援該物件。使用userAgent屬性傳回由客戶端傳送伺服器的 user-agent 頭部的值。頭資訊中有一個 User-Agent,它的作用是告訴伺服器,使用者客戶端是什麼瀏覽器,以及作業系統的資訊的。使用正規表示式進行user-agent值的取得。和本地的值進行判斷,這個匹配值可以是行動作業系統例如Android,ios,也可以是瀏覽器的名稱。有匹配項則跳轉,否則則不會跳轉,直接進入PC端首頁。

具體的程式碼實現,我們為了提高網站的可移植性,使用了JavaScript腳本語言。使用此技術的好處在筆者看來有兩點

1:可以提高網站的可移植性,如果在此後的Web專案中,我們團隊需要再一次加入行動終端的效果,就可以很輕鬆的引入這部分的JS程式碼,進行判斷。提高以後的工作效率。

2:第二點是便於Web程式可以在不用的介面加載,是否引入這部分行動終端的判斷程式碼。

具體實作:

我們把判斷存取的腳本抽離,如果哪個頁面需要進行客戶終端的判斷,我們就直接在頁面使用<script></script>引入腳本程序,具體判斷程式碼如下:

複製程式碼 程式碼如下:

function uaredirect(function uaredirect(function uaredirect(function uaredirect()
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)
   {
   }
}
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
pc端是電腦還是手機 pc端是電腦還是手機 Feb 20, 2023 pm 03:19 PM

pc端是電腦。 pc全名為Personal Computer,中文意思為個人電腦或個人電腦;PC端是指網路世界裡可以連接到電腦主機的那個端口,是基於電腦的介面體系,它有別於行動端的手機介面體系。

如何在Vue專案中使用行動端的手勢操作 如何在Vue專案中使用行動端的手勢操作 Oct 08, 2023 pm 07:33 PM

如何在Vue專案中使用行動端的手勢操作隨著行動裝置的普及,越來越多的應用程式需要在行動端上提供更友善的互動體驗。而手勢操作是行動裝置上常見的互動方式之一,它能夠讓使用者透過觸控螢幕來完成各種操作,如滑動、縮放等。在Vue專案中,我們可以透過第三方函式庫來實現行動手勢操作,以下將介紹如何在Vue專案中使用手勢操作,並提供具體的程式碼範例。首先,我們需要引入一個專門用

解決Vue行動端多觸點問題 解決Vue行動端多觸點問題 Jun 30, 2023 pm 01:06 PM

在行動裝置開發中,我們經常會遇到多手指觸控的問題。當使用者在行動裝置上使用多個手指滑動或縮放螢幕時,如何準確地識別和回應這些手勢是一個重要的開發難題。在Vue開發中,我們可以採取一些措施來解決行動端多手指觸控問題。一、使用vue-touch插件vue-touch是用於Vue的手勢插件,它可以方便地處理移動端的多手指觸控事件。我們可以透過npm安裝vue-to

pc端是什麼意思 pc端是什麼意思 Jan 02, 2021 pm 04:41 PM

pc全名為Personal Computer,中文意思為個人電腦或個人電腦;PC端是指網路世界裡可以連接到電腦主機的那個端口,是基於電腦的介面體系,它有別於行動端的手機介面體系。

Vue開發中如何解決行動端雙擊放大問題 Vue開發中如何解決行動端雙擊放大問題 Jun 29, 2023 am 11:06 AM

隨著行動端設備的普及,使用Vue進行行動端開發已經成為了常見的選擇。然而,我們在行動端開發過程中常常會面臨一個問題,就是雙擊放大。本文將針對此問題,探討Vue開發中如何解決行動端雙擊放大的具體方法。行動端雙擊放大問題的出現​​,主要是因為行動裝置在觸控螢幕上進行雙擊操作時,會自動放大網頁的縮放比例。對於一般的網頁開發來說,這種雙擊放大通常是有好處的,因為它可以

Vue實現行動端響應式佈局的完整指南(Vant) Vue實現行動端響應式佈局的完整指南(Vant) Jun 09, 2023 pm 04:09 PM

Vue實現行動端響應式佈局的完整指南(Vant)行動端響應式佈局是現代Web開發中非常重要的一環,隨著行動裝置的普及,如何快速響應用戶手機螢幕的大小和分辨率,成為了前端工程師必須面對的挑戰之一。 Vue框架自備響應式佈局的特性,同時也有不少第三方函式庫來幫助我們實現響應式佈局。其中,Vant元件庫是一款Vue行動裝置UI庫,因其十分強大、易用和客製化,並且完全符合移

使用Python和百度地圖API實現行動端地圖定位功能的方法 使用Python和百度地圖API實現行動端地圖定位功能的方法 Jul 29, 2023 pm 11:33 PM

使用Python和百度地圖API實現行動端地圖定位功能的方法隨著行動網路的發展,地圖定位功能在行動裝置應用程式中變得越來越常見。 Python作為一種流行的程式語言,也可以透過使用百度地圖API來實現行動端地圖定位功能。以下將介紹使用Python和百度地圖API實作地圖定位功能的步驟,並提供對應的程式碼範例。步驟一:申請百度地圖API密鑰在開始之前,我們首先需要申請

pc端是什麼意思? pc端是什麼意思? Jan 16, 2024 am 10:23 AM

PC端通常是指個人電腦,包括桌上型電腦、筆記型電腦等,是人們常用的裝置之一。 PC端一般指的是運行在電腦上的一種作業系統和應用程式的集合體,它具有強大的運算處理能力和人機互動介面,通常用於進行各種辦公室、娛樂、設計、程式設計等活動。

See all articles