Web App on Android Zoom Level

Targets Web
1

Today I tried my web app on Mac Chrome, Mac Safari, Windows 8 Chrome, Windows 8 IE, and iPad Safari and everything looked great.

So then I tried my Google Nexus 7 Android device as well as the Android Studio Virtual Machines. Each time Android displayed the Web App at just about 2 times the size as Mac, Windows, and iPad.

I tried adding the the following to the HTMLHeader and a few other combinations of that setting the width to 1000px and scales. Android liked .5, but that caused Safari to be twice as small.

<meta name="viewport" content="width=100%, initial-scale=.5, maximum-scale=.5, minimum-scale=.5, user-scalable=no" />

Then I made a button with the following code to change the page Zoom which sized it perfectly on Android, but tapping in a WebListbox resulted in the taps going to where they would without the zoom applied.

me.ExecuteJavaScript( "document.body.style.zoom = '50%';" )

Is there a way for the Android device to zoom ‘normally’ like Mac, Windows, and iPad?

2

Some pics with no zoom and with WebApp.HTMLHeader = “”.

Android ‘Browser’

iPad Safari

Mac Chrome

Window Chrome

3

RubberViewsWE online demo does display fine on the Android browser.

However, I confirm something is very wrong with a simple test project not using RV.

There maybe an issue in the internal header (the one that Xojo uses by default):

[code]

Untitled [/code]

I do not think the Android browser honors apple-mobile-web-app-capable. It could be what throws the viewport off.

4

Thanks Michel!

I found two articles about that:

So I added the following to the HTMLHeader, but it’s still zoomed in. :frowning:

<meta name="mobile-web-app-capable" content="yes">
5

[quote=217888:@Hal Gumbert]Thanks Michel!

I found two articles about that:

So I added the following to the HTMLHeader, but it’s still zoomed in. :frowning:

<meta name="mobile-web-app-capable" content="yes">

You mentioned above that scale=.5 works for Android but not for the rest. It would be nice to be able to set HTMLHeader dynamically, but since it is not possible, the only way I see is to use in fact two apps : the main app, and a copy of it especially configured for Android. All clients are sent initially to the main app. If Android browser is detected, send the user through showURL to the Android app.

Note that because of a bug Android is not recognized in Session.Browser. Use Session.Header("User-Agent") instead and look for “Andoid” in there.

6

OK. It IS possible to change the content of HTML header dynamically, and the most amazing is that it works. I always thought one it was loaded in the browser, the content of head was fixed.

I did stumble on an intriguing post here :
http://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html

The guy uses JavaScript to change the viewport with JavaScript.

So I quickly tested, and IT WORKS ! ! !

Add to App.HTMLHeader :

<meta id="testViewport" name="viewport" content="width = 380">

Constant Change :

var mvp = document.getElementById('testViewport'); mvp.setAttribute('content','width=740');

In a button, I added the JavaScript :

Sub Action() self.ExecuteJavaScript(change) End Sub

When I tap on the button, it changes the scale.

This is the principle. You can use the same technique to put an ID on your header :

<meta id="thisismyheader" name="viewport" content="width=100%, initial-scale=.5, maximum-scale=.5, minimum-scale=.5, user-scalable=no" />

Then you change your attribute as needed. It should work with 1 for all others, and you set it to .5 for Android.

7

Thanks soooo much for finding that Michel! I got it working by:

  • Adding the following to the App.HTMLHeader.
<meta id="viewportSize" name="viewport" content="" />
  • Adding this Method:

[code]Sub ViewportSet(Extends theWebPage as WebPage)
// Set the ViewPort
// Android displays the page at 200%, so it should be scaled using .5 to to force it to display at 100%

Select Case Session.Platform
Case WebSession.PlatformType.AndroidPhone
theWebPage.ExecuteJavaScript( "var mvp = document.getElementById( ‘viewportSize’ ); mvp.setAttribute( ‘content’, ‘width=100%, initial-scale=.5, maximum-scale=.5, minimum-scale=.5, user-scalable=no’ ); " )
Case WebSession.PlatformType.AndroidTablet
theWebPage.ExecuteJavaScript( "var mvp = document.getElementById( ‘viewportSize’ ); mvp.setAttribute( ‘content’, ‘width=100%, initial-scale=.5, maximum-scale=.5, minimum-scale=.5, user-scalable=no’ ); " )
'Case WebSession.PlatformType.Blackberry
'MsgBox(“Blackberry”)
'Case WebSession.PlatformType.iPad
'MsgBox(“iPad”)
'Case WebSession.PlatformType.iPhone
'MsgBox(“iPhone”)
'Case WebSession.PlatformType.iPodTouch
'MsgBox(“iPodTouch”)
'Case WebSession.PlatformType.Linux
'MsgBox(“Linux”)
'Case WebSession.PlatformType.Macintosh
'MsgBox(“Macintosh”)
'Case WebSession.PlatformType.PS3
'MsgBox(“PS3”)
'Case WebSession.PlatformType.WebOS
'MsgBox(“WebOS”)
'Case WebSession.PlatformType.Wii
'MsgBox(“Wii”)
'Case WebSession.PlatformType.Windows
'MsgBox(“Windows”)
'Case WebSession.PlatformType.Unknown
'MsgBox(“Unknown”)
Else
theWebPage.ExecuteJavaScript( "var mvp = document.getElementById( ‘viewportSize’ ); mvp.setAttribute( ‘content’, ‘width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no’ ); " )
End Select

End Sub[/code]

  • Then calling that method on my default Webpage’s Shown Event Handler:
self.ViewportSet