ullright Mobile Version

Introduction

ullright offers a very simple method to add templates and css files for mobile devices.

On each request the user agent string of the webbrowser is checked against a list.

Setup

In apps/frontend/config/apps.yml set "enable_mobile_version" to true

all:
 
  # Enable mobile version rendering for smartphones etc
  enable_mobile_version: true

Directory Structure and Important Files

• / - project root
  
  • apps/frontend/ - contains all custom files except web assets like images, css files
    
    • config/
      
      • app.yml - set "enable_mobile_version" to true here
    • modules/ - module specific customisations ullCms - customisations of the cms module
      
      • templates - put custom templates for specific cms pages here.
        Example: aboutUsSuccess.mobile.php
    • templates/ - custom layouts and html head for normal and mobile version
      • _html_head.mobile.php - custom html head statements for mobile devices
      • layout.mobile.php - custom mobile layout
  • web/ - web assets
    
    • css/ - custom stylesheets
      • custom_multi_format.css - Custom CSS statements for both the normal and mobile version
      • custom.css - Custom CSS statements for the normal version
      • custom.mobile.css - Custom CSS statements for the mobile version

Check if a Mobile Device was detected

In any template you can find out if the mobile version is active by querying

$sf_request->getRequestFormat()

Example:

<? if ('mobile' === $sf_request->getRequestFormat()): ?>
  // Yes, mobile version activated, do somethin

HTML Viewport

<meta name="viewport" content="width=device-width,target-densitydpi=150" />

<!-- Tablet initial zoom -->
<?php //<meta name="viewport" content="initial-scale=0.8"> ?>
<meta name="viewport" content="width=device-width,target-densitydpi=200" />