Kule urBrowser

你目前使用的裝置類型為{{ub.getDevice === 'desktop' ? '電腦' : '行動裝置'}},作業系統為{{ub.getOSName}},使用的瀏覽器為{{ub.getBrowserWithCoreName.core}}核心的{{ub.getBrowserName.name + ' ' + ub.getBrowserVersion.int}}

你目前正在使用{{ub.getBrowserWithCoreName.origin}}應用程式開啟網頁,你的作業系統為{{ub.getOSName}},使用的瀏覽器為{{ub.getBrowserWithCoreName.core}}核心的{{ub.getBrowserName.name + ' ' + ub.getBrowserVersion.int}}


Kule urBrowser 會把使用者的作業系統、裝置以及瀏覽器等資訊紀錄下來,並且儲存於 Localstorage、Cookie 與 html 標籤上。

{{democode}}


安裝方式

你可以下載檔案 (ver. {{ub.version}})

<script id="urbrowser" data-domain=".你的網域" src="你的路徑/kule.urbrowser.min.js"></script>

如果你希望擷取使用者端資訊要回傳到後端,可加上 data-reload="true",當使用者沒有 coockie 資料時會抓取使用者端資訊並儲存,接著會重新讀取頁面,此時後端可以藉由 cookie 接收到使用者裝置資料。

<script id="urbrowser" data-domain=".你的網域" data-reload="true" src="你的路徑/kule.urbrowser.min.js"></script>

使用說明

無論使用以上哪一種方式,你可以將你的網域加入至 data-domain 。當網頁讀取時就會自動開始執行,並且將使用者的瀏覽器、作業系統、平台等等資訊記錄下來並置放於<html>上,例如:

{{democode}}

IE 9+, Edge 12+, Chrome 4+, Firefox 3.5+, Safari 4+, Opera 11.5+ 等瀏覽器會另外儲存至 Cookie 與 Local Storage,可隨時供 javascript 或後端語言使用,例如:

{{myCookie}}

使用者的作業系統或平台

id 會記錄使用者的作業系統或平台,偶爾會發生在不同平台但相同瀏覽器的情況下發生部分的差異,所以透過 id 紀錄作業系統或是平台資訊,來處理CSS Hack,資訊包含 windows, wp(windows phone), mac, iphone, ipad, ipod, linux, android, chromeos, unix, solaris, playstation, nintendo, blackberry, freebsd, openbsd, palm, symbian,例如:

<html id="{{ub.getOSName}}">

在CSS Hack上就可以寫:

#{{ub.getOSName}} .selector {
    opacity: .5;
}

如果你有使用 CSS 預處理器,那麼可以這樣寫:

#{{ub.getOSName}} {
    .selector {
        opacity: .5;
    }
}

使用者的裝置類型、瀏覽器資訊

urBrowser 會將使用者的裝置類型與瀏覽器資訊紀錄於class上,裝置類型區分 desktop 與 mobile,瀏覽器資訊則包含瀏覽器名稱、瀏覽器名稱與版號、瀏覽器核心。記錄瀏覽器核心是為了在相同核心的瀏覽器發生問題時,可以一次處理,例如Chrome, Safari, 新版的Opera 都是使用 Webkit。另外,IE 的核心名稱雖然為 Trident,但為了方便記憶,所以改為 ie,例如:

<html class="desktop ie11 ie">
<html class="desktop chrome chrome69 webkit">
<html class="mobile fxios firefox firefox56 webkit">
<html class="mobile safari safari12 webkit">
<html class="mobile line line8 webkit">

除了以上這些較為知名的瀏覽器之外,有一些瀏覽器是基於某個瀏覽器再添加各自的功能或特色,這種情況下尤其在 Chrome/Chromium 上較為明顯,此時該瀏覽器的 class 名稱則會另外新增 chrome 這個名稱,例如:

<html class="mobile yandex chrome webkit">

針對以上範例,在CSS Hack上就可以這麼寫:

.{{ub.getBrowserName.name}} .selector {
    opacity: .5;
}

如果是所有的 Webkit:

.webkit .selector {
    opacity: .5;
}

除了以上這些較為知名的瀏覽器之外,有一些瀏覽器是基於某個瀏覽器再添加各自的功能或特色,這種情況下尤其在 Chrome/Chromium 上較為明顯,此時該瀏覽器的 class 名稱則會另外新增 chrome 這個名稱,例如:

<html class="yandex chrome webkit">

針對以上範例,在CSS Hack上就可以這麼寫:

.ie11 .selector {
    opacity: .5;
}

如果是所有的IE:

.ie .selector {
    opacity: .5;
}

針對所有使用Webkit核心的瀏覽器:

.webkit .selector {}

針對Chrome, Firefox, Safari, Opera, Edge:

.chrome .selector {}
.firefox .selector {}
.safari .selector {}
.opera .selector {}
.edge .selector {}

針對Android原生瀏覽器:

.adrBuiltin .selector {}

混合使用

有時候會發生不同作業系統某個相同瀏覽器的情況下有些微不同時,必須要做些Hack,例如:

#{{ub.getOSName}}.chrome .selector {
    opacity: .5;
}

#{{ub.getOSName}}.opera .selector {
    opacity: .5;
}

如果你有使用 CSS 預處理器,那麼可以這樣寫:

#{{ub.getOSName}} {
    &.chrome {
        .selector {
                opacity: .5;
        }
    }

    &.opera {
        .selector {
                opacity: .5;
        }
    }
}

Webview

當使用 Webview 時,在某些情況下可能只需要針對 Webview 處理某些操作或是修正,因此如果你有使用 Webview 時,可在 User Agent 加上以下字串:cordova 或 phonegap 或 react 或 nodejs 或 webview 等字樣,如需分辨 iOS 與 Andoird 可如下表示:

html 標籤上就會顯示以下資訊 :

<html class="webview-ios webview webkit" data-webview="ios">
<html class="webview-adr webview webkit" data-webview="android">

如果不是上述情況時,data-webview 則顯示為 false


第三方 APP 內建的瀏覽器

雖然 IE 時代已經邁向終結,也不太會再遇到支援 IE 眾多鳥事,但接踵而來的卻是許多第三方 app 內建的瀏覽器,此時開發者難以知道使用者瀏覽器的版本,因此針對了 Facebook apps, Twitter, Line, Kakaotalk, MicroMessenger(微信) 等 APP 做識別,並且會將該 APP 名稱置入於 class 名稱內,並且增加 inapp 表示為內建於 app 的瀏覽器,例如:

<html class="mobile line line8 webkit inapp">

使用者的裝置

裝置資料以 Desktop, Mobile 兩種來區分,並且記錄於 class 與 data-device,例如:

<html class="{{ub.getDevice}}" data-device="{{ub.getDevice}}">

瀏覽器與系統名稱

<html data-browser-name="{{ub.getBrowserName.name}}" data-browser-version="{{ub.getBrowserVersion.int}}" data-os-name="{{ub.getOSName}}">

Breakpoints

無論使用 RWD 或是 AWD 時,可以分辨現在是使用哪一種設計版型。判斷規則為:小於 576px 會顯示 xs,大於 576px 則顯示 sm,如果大於 768px 則顯示 md,大於 992 顯示 lg,大於 1200px 顯示 xl。

<html data-bp="{{ub.getBreakpointRange}}">

LocalStorage 與 Cookie

urBrowser 會將所有資訊記錄於 LocalStorage 與 Cookie(預設時效為365天),後端可透過 Cookie 取得資料,javascript 取得使用者瀏覽器資訊時,可直接透過 LocalStorage 取得,例如:

var urb = localStorage.getItem('urbrowser');

urb = JSON.parse(urb);
console.log(urb.getBrowserWithCoreName);
/* console
{{ub.getBrowserWithCoreName}}
*/

注意:不支援 IE 9 以下版本 (IE 9 以下應該也不需要處理 RWD 或 AWD 才是)

LocalStorage 資料

{{storage}}

瀏覽器支援

最後,urBrowser 可支援的瀏覽器包含:IE 9+, Edge 12+, Chrome 4+, Firefox 3.5+, Safari 4+, Opera 11.5+。
IE 6 至 IE 8 僅顯示瀏覽器資訊於 <html>上,但不會將資訊儲存於 Cookie 與 Web Storage。IE 8 雖然支援 Web Storage,但是正常來說因為製作 RWD 或 AWD 時應該不太會需要支援到 IE 8,所以就放棄了。