02-08-2012 11:17 AM
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?
Solved! Go to Solution.
02-09-2012 11:06 AM - edited 02-09-2012 11:08 AM
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"></met
02-09-2012 11:14 AM - edited 02-09-2012 11:16 AM
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...
02-09-2012 11:21 AM - edited 02-09-2012 11:22 AM
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?
02-09-2012 11:27 AM
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...
02-11-2012 01:58 PM - edited 02-11-2012 01:59 PM
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" />
11-14-2014 11:06 AM
@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/Mobi