Documentation

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

vaadin:mobile_devices [2018/02/06 12:59] (current)
admin created
Line 1: Line 1:
 +~~NOTRANS~~
 +~~Title: Mobile devices~~
  
 +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):
 +
 +<file html>
 +//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"​ />
 +</​file>​
 +
 +If your application should be automatically scaled, simply change your deployment descriptor (web.xml) and add following
 +
 +<file xml>
 +<​init-param>​
 +  <​param-name>​mobileView</​param-name>​
 +  <​param-value>​true</​param-value>​
 +</​init-param>​
 +</​file>​
 +
 +to your servlet configuration.
 +
 +This parameter will add the meta tag:
 +
 +<file html>
 +<meta name="​viewport"​ content="​user-scalable=no,​initial-scale=1.0"​ />
 +</​file>​
 +
 +to the html page.
 +
 +You don't need additional source code for mobile device support!
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information