If you're using mobile devices for your web application based on our Vaadin UI, you know that the resolution doesn't change automatically. The app will be shown as a desktop application but on your mobile device. It's not nice – especially on smartphones. However… 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 favorite 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):

//iOS
<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"/>
 
//Android
<link href="icon-normal.png " rel="icon" sized="128x128"/>
<link href="icon-hires.png " rel="icon" sized="192x192"/>
 
//WP
<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 the following:

<init-param>
  <param-name>mobileView</param-name>
  <param-value>true</param-value>
</init-param>

to your servlet configuration.

This parameter will add the meta tag:

<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!