Page Width in Android browser

In searching the forums I was able to see a number of questions regarding small webpage output on non-apple products but was not able to find any working solutions. As an example:

I created a control page called BIG. I set the size to 200x200 and then place a few buttons (with text). Since this is a pretty small control page size the expectation is that it will render on my android phone so that it displays a very large button and very large text. Instead, my 200x200 control page is rendered in the upper left side of the browser window using a very small rendering of the page (filled with a ton of blank space to the right and below.

I copied my control page, set it to 800x800, and called it SMALLER. This rendered exactly the same as the previous control page.

I found a reference to editing the controlpage.html template that discussed adding a viewport to a set width. This seemed to solve the size rendering. IE: Making it have a width of 200 now makes my original controlpage called BIG use the width correctly. Taking it one step farther, instead of using a static width, I used the page width variable found lower in the controlpage.html code. This actually used the control pages width correctly allowing me to set my size in the control page editor HOWEVER after doing this, it broke all of the built in Indigo web pages.

So, from what I can tell, using my modified controlpage.html template with the page width variable in the viewport metatag will allow me more control on the rendering of my control pages by using the control pages screen width but causes the built in web pages text and frame sizes to go nuts. Any thoughts? Or any condition logic I can put into the controlpage.html to ignore the width metatag for the built in web pages?

Polycron

[matt (support)]

What changes did you make to the controlpage.html template file? Here is the conditional code that used on an iPhone in the template:

Code: Select all

#if $iphone
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="format-detection" content="telephone=no" />
  #if $asList
      <meta name="viewport" content="width=320" />
  #else
      <meta name="viewport" content="width=${page.width}" />
  #end if
#end if

So note how if $asList is true, which is the case for the built-in devices, variables, actions UI, then it uses a static width but if it is a graphical control page ($asList is false) it uses the page.width. Is that the same logic you are after?

Hi Matt,

I figured it out based on your response. I made the following change to the code in your response:

Code: Select all

#if $iphone
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="format-detection" content="telephone=no" />
  #if $asList
      <meta name="viewport" content="width=320" />
  #else
      <meta name="viewport" content="width=${page.width}" />
  #end if
#else
  #if not $asList
      <meta name="viewport" content="width=${page.width}" />
  #end if
#end if

This allowed my android browser to use the control page width entry while not goofing up the built in devices, variables, actions UI, etc. I'm not sure if this is the proper way to do what I was shooting for, but it does work. I'm making two assumptions: 1) That any future updates to version 5.x will overwrite my controlpage.html changes? 2) Upgrading to version 6.x will also break my changes (and may need a different method if the web processes are different)?

Polycron

[matt (support)]

Do you know what exact User-Agent your Android browser is using? I might try to add the changes into Indigo so it doesn't overwrite/break for you.

For the Android Chrome browser I show:

Code: Select all

Mozilla/5.0 (Linux; Android 4.0.4; SCH-I535 Build/IMM76D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

For the native built in Android browser I show:

Code: Select all

Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; SCH-I535 4G Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

I bounce between the browsers.

Polycron

[matt (support)]

The next beta of Indigo 6 (and next release of Indigo 5.1) will include this logic to try to size the pages better on mobile Android devices. Please let me know how it works for you once it is available.

[matt (support)]

The new installers for Indigo 5 and Indigo 6 beta are now available for download.

The next beta of Indigo 6 (and next release of Indigo 5.1) will include this logic to try to size the pages better on mobile Android devices. Please let me know how it works for you once it is available.

Is this still present in the most recent beta (6.0 beta 10)? I am starting to use an Android device, and I am seeing very small, very wide built-in control pages.

[jay (support)]

Yes, that is still in. We added the android user agent so that it forced the view width on the object specific pages. It seems the browser you're using uses a different user agent - if you can figure out what it's sending then send it to us and we'll look into it.

Here's what I was able to find

Mozilla/5.0 (Linux; Android 4.2.2; Nexus 4 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.90 Mobile Safari/537.36

[jay (support)]

We'll look more into it - it's hard for us to test since neither of us have Android devices. Guess we need to figure out how to get an Android simulator running...

I would be more than happy to help test in any way I can. Thanks for your help!

Any news on whether this will end up in a soon-to-be-released Beta?

[jay (support)]

Unfortunately, no, it's going to have to wait for a while. We're extremely resource constrained at the moment.

Unfortunately, no, it's going to have to wait for a while. We're extremely resource constrained at the moment.

Clearly, you guys have been working on page rendering for Android devices as the current controlpage.html looks a lot more robust than above. Unfortunately, however, I'm still experiencing some trouble on my wife's Galaxy S4:

Code: Select all

Mozilla/5.0 (Linux; Android 4.3; en-us; SAMSUNG SCH-I545 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36

Pages on her phone are still rendering too small. Thanks in advance for any advice!

Dave