12-04-2012 04:48 PM
Hi guys,
I'm working on a maps app right now using BBUI & web works.
The functionality is great - thanks to video uploaded earlier.
The thing is that the map itself is way to "small". Don't get me wrong - it fills the device size.
But there are two problems:
1) the meta tag I'm usually using:
<meta name="viewport" content="width=384, initial-scale=1.0, user-scalable=no">
is not working.
---> 2) the map's width and height must be 768x1280 to fill the device.
----> the markers, street view etc. are extremely small, not user friendly at all.
I guess this is becuase of BBUI because in former projects, not using BBUI, I was always able to use the meta tag and make it more user friendly.
Can anybody please help me out?
12-04-2012 04:50 PM - edited 12-04-2012 05:10 PM
I just noticed this: https://github.com/blackberry/bbUI.js/issues/295
But it doesn't provide me with a solution...
Inside the BBUI.js search for "viewport" and delete commands done there.
But I guess everything's even worse now ![]()
It seems BBUI is fixed to the screen size of the Dev Alpha so changing this makes every proportion go crazy. ![]()
12-04-2012 04:52 PM - edited 12-04-2012 05:08 PM
12-04-2012 04:55 PM - edited 12-04-2012 05:08 PM
12-04-2012 07:38 PM
try this :
<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% }</style>This CSS declaration indicates that the map container<div>(named map_canvas) should take up 100% of the height of the HTML body. Note that we must specifically declare those percentages for<body> and <html> as well.
12-04-2012 08:54 PM
Wotcha Flo
Try this...
Skip the width in the meta - that will definitely make this happen
If you wanna get everything fitting nicely measure the screen with some easy JS
var wh = window.innerHeight;
var ww = window.innerWidth;
You can now size and place everything as you wish
Mail me if you need the complex explanation
12-05-2012 01:05 AM
12-05-2012 06:40 AM
Sure Flo
Send me the source and I'll have a play
12-05-2012 06:46 AM - edited 12-05-2012 06:48 AM
Try this as view port meta tag....... <script> var meta = document.createElement("meta"); meta.setAttribute('name','viewport'); meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no'); document.getElementsByTagName('head')[0].appendChi