DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: Moble devices capabilities detector

Created:2010-02-18T17:33:18
Changed by:Tomasz Krawczyk
Changed:2013-08-20T11:55:34.680000000
Classification:tk_mobiledetector
Description:---- forAdmins (use this for Administrators) forDevelopers (use this for Developers) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) ----
Keywords:mobile, device, uaprof, capabilities, typoscript, conditions
Author:Tomasz Krawczyk
Email:tomasz@typo3.pl
Info 4:
Language:en

img-1 img-2 EXT: Moble devices capabilities detector - tk_mobiledetector

EXT: Moble devices capabilities detector

Extension Key: tk_mobiledetector

Language: en

Keywords: mobile, device, uaprof, capabilities, typoscript, conditions

Copyright 2011-2013, Tomasz Krawczyk, <tomasz@typo3.pl>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents

EXT: Moble devices capabilities detector 1

`Introduction 3 <#__RefHeading__598_1075316393>`_

What does it do? 3

How it works? 3

Why not WURFL? 3

`Administration 4 <#__RefHeading__608_1075316393>`_

Installation 4

Extension configuration 4

Backend module 4

`TypoScript conditions 5 <#__RefHeading__612_1075316393>`_

Examples 7

`Mobile site debugging 11 <#__RefHeading__623_872419733>`_

Firefox plugin - Modify headers 11

FE Plugin “Mobile detector – tester” 11

`Bug reports 12 <#__RefHeading__622_1075316393>`_

Introduction

What does it do?

  • This extension tries to detect mobile device capabilities and stores them into database.
  • Provides new TypoScript conditions that may help you create better mobile sites.

How it works?

Device capabilities detection is based on UAProf (User Agent Profile) . Extension looks for HTTP headers: HTTP_PROFILE, HTTP_X_WAP_PROFILE, WAP-PROFILE, X-WAP- PROFILE or XX-PROFILE. Those headers may contain link to UAProf file. The UAProf file is an XML document that describes mobile device capabilities such as: vendor, model, screen size, supported image types and many other. Extension checks if found UAProf link exists in data table. If yes then gets device capabilities from the table. If the link doesn't exist in data table then UAProf link is red, parsed and mobile device capabilities are stored in database.

For detecting device type from User Agent method from http://detectmobilebrowsers.com was taken.

Why not WURFL?

Since August 2011 the great WURFL database is no longer Open Source. From its last free version devices was extracted and all unique device UAProfs was stored to static extension data.

Administration

You may administer the extension in two places. In The Extension Manager and in the Backend module.

Installation

  • Install the extension tk_mobiledetector in the Extension manager.
  • Import static data.
  • Set the extension configuration options.
  • Include example static templates or write them on you own. Two templates are provided “Mobile Main” for a whole mobile site and “Mobile tt_news” for news images sizing.

Extension configuration

DetectTablets

Option

DetectTablets

Description

If you turn this feature on then this ext will try to detect tablets. Device type “tablet” will be available in TypoScript. In most cases tablets should be considered full sized browsers.

Default

0

DetectedDeviceType

Option

DetectedDeviceType

Description

This is a short string used in Typoscript in order to tell difference between browser, grabber or robot. Curently TYPO3 supports “pda” and “wap” for all mobile devices. This extension adds new type mobi .

Default

mobi

MobileSiteUrl

Option

MobileSiteUrl

Description

Enter here your mobile site address. This will be used in the future release for exchange with capabilities server.

Backend module

Extension adds to the backend “Mobile devices” module to the Admin Tools section. Currently you can use two options:

Device statistics – provides information about imported devices from the last open source WURFL database and collected by your site from visiting devices.

Check and add device – lets you check if UAProf link exists in database. If the link is new then it is parsed and added to data table.

TypoScript conditions

vendor

Condition

vendor

Data type

string

Description

Device vendor like: Nokia, SonyEricson, HTC, LG, …You can use wildcard * or PCRE Regular Expressions (see doc_tut_tsref and “UserAgent” example).

[vendor= = Nokia]

lib.xtest.value = It is Nokia

[vendor= Acer*]

// may be “ACER” or “ACER Corporation” or “Acer Incorporated “

[end]

model

Condition

model

Data type

string

Description

Mobile device model like Blackstone, N95, 6630...You can use wildcard * or PCRE Regular Expressions (see doc_tut_tsref and “UserAgent” example).

screen_width

Condition

screen_width

Data type

integer

Description

Screen width in pixels.You may use integer operators to compare screen sizes. [ screen_width = >= 240]

screen_height

Condition

screen_height

Data type

integer

Description

Screen height in pixels.You may use integer operators to compare screen sizes.

browser_name

Condition

browser_name

Data type

string

Description

Mobile browser nameYou can use wildcard * or PCRE Regular Expressions (see doc_tut_tsref and “UserAgent” example).

browser_version

Condition

browser_version

Data type

string

Description

Mobile browser version.Because some browser versions are not only numeric simple string operator may be used here. [ browser_version = = 3.8]

frames

Condition

frames

Data type

boolean

Description

True when device supports HTML frames.

[frames= = 1]

// The browser supports frames

[end]

html_tables

Condition

html_tables

Data type

boolean

Description

True when device supports HTML tables

java

Condition

java

Data type

boolean

Description

True when device supports Java

javascript

Condition

javascript

Data type

boolean

Description

True when device supports JavaScript

html_version

Condition

html_version

Data type

string

Description

Supported HTML version.Numeric compare operators are allowed. [html_version= >= 4.0]

xhtml_version

Condition

xhtml_version

Data type

string

Description

Supported XHTML version

os

Condition

os

Data type

string

Description

Device OS like Android, Symbian, Windows Mobile, …You can use wildcard * or PCRE Regular Expressions (see doc_tut_tsref and “UserAgent” example).

os_version

Condition

os_version

Data type

string

Description

OS version.Numeric compare operators are allowed. [os_version= >= 2.0]

os_vendor

Condition

os_vendor

Data type

string

Description

OS vendor.You can use wildcard * or PCRE Regular Expressions (see doc_tut_tsref and “UserAgent” example).

gif

Condition

gif

Data type

boolean

Description

True when device supports GIF images.

jpg

Condition

jpg

Data type

boolean

Description

True when device supports JPG images.

png

Condition

png

Data type

boolean

Description

True when device supports PNG images.

call_str

Condition

call_str

Data type

string

Description

String that may be used to make phone calls directly from the site. Note:This is not implemented yet.

Examples

You can set global image size on the mobile site.

img-3

HTML headers:

img-4

img-5

Company logo:

img-6

tt_news image sizes:

img-7

Other conditions for particular devices:

img-8

Mobile site debugging

Firefox plugin - Modify headers

During mobile site creation it is really helpful to use Firefox plugin called “Modify headers”. Using this plugin you will be able to check the page on your computer. When you set UAProf header then Mobile detector will be able to detect device capabilities.

img-9

FE Plugin “Mobile detector – tester”

This plugin shows a few tables with device detection results. The first table “Browser info” presents data from UAProf header.