Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
j_invantage
Posts: 4
Registered: ‎02-08-2012
My Device: 9810
Accepted Solution

Viewport issues - Web App

I am working on a web app that works accross all platforms.

 

Using <meta name="viewport"> all browsers show the webapp perfectly, but not BlackBerry (honestly, I'm not surprised)

 

I have every possibility with viewport, and nothing works on any blackberry smartphones. Here is what I have:

 

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, maximum-scale=1.0>

 

Anyone can help?

Developer
shnuffy
Posts: 268
Registered: ‎08-19-2009
My Device: Bold 9700

Re: Viewport issues - Web App

[ Edited ]

Well you have an errant quote " in your second line. Try this:

 

<meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no"></meta>

 

New Contributor
j_invantage
Posts: 4
Registered: ‎02-08-2012
My Device: 9810

Re: Viewport issues - Web App

[ Edited ]

Yes, in the thread, but not in my file. I copy pasted it in there and simply didn't see it.

 

Good catch though.

 

... Yet it still does not work.

 

I tried all possibilities:

 

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, height=device-height" />
<meta name="viewport" content="initial-scale=1.0" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0" />

 

 

and so on... 

Developer
shnuffy
Posts: 268
Registered: ‎08-19-2009
My Device: Bold 9700

Re: Viewport issues - Web App

[ Edited ]

Hm... try adding the id tag like I have in my example. Maybe the BB looks for it.

 

Does it just behave as if the meta viewport isn't there at all? Does it display correctly on iPhone?

New Contributor
j_invantage
Posts: 4
Registered: ‎02-08-2012
My Device: 9810

Re: Viewport issues - Web App

It displays perfectly on every other devices (iPhone 3g, 3gs, 4, 4s, android) but not Android. BlackBerry is the only platform I always have to adjust and adapt too... makes me feel like Internet Explorer madness...

 

I'll try the id, but I doubt it'll do anything... it's usually used in parallel with JavaScript to modify the meta tag on the fly...

New Contributor
j_invantage
Posts: 4
Registered: ‎02-08-2012
My Device: 9810

Re: Viewport issues - Web App

[ Edited ]

I FOUND IT!!! God  Blackberry is he worse thing that ever existed... I seriously cannot understand how they got in so deep in enterprise...

 

So for those who want to know how to fix it, it's simple.

 

First I had what every other phone browser displayed perfectly:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

 But it turns out that Blackberry does not support initial-scale, minimum-scale or maximum-scale when a specific page width has been determined in the body ( ie: width: 640px; ).

 

So if you do this, every other device still displays it fine, and blackberry does too!

 

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=640, user-scalable=no" />

 

Developer
shnuffy
Posts: 268
Registered: ‎08-19-2009
My Device: Bold 9700

Re: Viewport issues - Web App

Thanks for posting the solution!

BlackBerry Development Advisor
anzor_b
Posts: 165
Registered: ‎09-24-2012
My Device: Passport

Re: Viewport issues - Web App

@j_invantage, quick question: are you saying you are developing a cross platform application AND explicitly setting body width to 640px? 

 

You may have an incorrect understanding of how viewports work.

 

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

 The above tells the browser to display the page at full width of the device, while relying on the standard CSS pixel density instead of the physical density. This is used to make your content appear visually similar regardless of the screen density and resolution.

 

This also implies that your app is responsive, so your html and body need to have width: 100%, and let the viewport tag do its magic. Setting the body width explicitly will yield unexpected results, which is why every HTML5 framework out there uses body width: 100%. You may see different results on other devices, but that may also indicate they are more lenient towards this incorrect configuration.

 

Have a read here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag