Mobile devices

Information about development with Vaadin UI.

Mobile devices

Postby Development@SIB » Wed Jun 03, 2015 11:18 am

If you're using mobile devices for your web application based on our vaadinUI, you know that the resolution doesn't change automatically. The app will be shown as desktop application, but on your mobile device. It's not nice, especially on smartphones. But... mobile devices support viewport scaling if set via html page.

Another specific thing is that mobile devices support bookmarks of html pages. You can place a bookmark on the home screen(s) of your device. Such bookmarks should have custom icons. Usually it's a screenshot of the web page or the favourite icon.

We've built-in support for both issues.

Our vaadin UI will add following tags to the html page, if the application runs on a mobile device (identified via user agent = browser name):

Code: Select all
<link href="apple-touch-icon.png" rel="apple-touch-icon" />
<link href="apple-touch-icon-76x76.png " rel="apple-touch-icon" sized="76x76"/>
<link href="apple-touch-icon-120x120.png " rel="apple-touch-icon" sized="120x120"/>
<link href="apple-touch-icon-152x152.png " rel="apple-touch-icon" sized="152x152"/>
<link href="apple-touch-icon-180x180.png " rel="apple-touch-icon" sized="180x180"/>

<link href="icon-normal.png " rel="icon" sized="128x128"/>
<link href="icon-hires.png " rel="icon" sized="192x192"/>

<meta name="format-detection" content="no" />
<meta name="msapplication-tap-highlight" content="no" />

If your application should be automatically scaled, simply change your deployment descriptor (web.xml) and add following

Syntax: [ Download ] [ Hide ]

to your servlet configuration.

This parameter will add the meta tag:

Code: Select all
<meta name="viewport" content="user-scalable=no,initial-scale=1.0" />

to the html page.

You don't need additional source code for mobile device support!
User avatar
Posts: 310
Joined: Mon Sep 28, 2009 1:54 pm

Return to Documentation