Web and WebWorks Development

[anzor_b]

Good read on how to set up the viewport when developing applications for high density displays such as the one on  the BB10 Dev Alpha.

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...

Let me know if you have any questions.

[urbanglowcam]

It's a great link that did help with the script that was placed in my test app. There are a few issues I'm seeing though.

1. Looking at the ui guidelines relating to typography (https://developer.blackberry.com/devzone/design/typography.html), I've tried keeping my app consistent with that. The issue is that using the pt unit shows the text to be extremely small on the dev alpha. When I use the comparable px units (i.e. 54px vs 11pt), the text looks just right. That's fine and all but it's bothering me that I can't get the pt units to work as I'd imagine it should.

2. When linking to two different stylesheets, the Dev Alpha always seems to link to the playBook.css. I could be missing something, but shouldn't it link to the devAlpha.css?

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1)" href="css/playbook.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.2437500953674316)" href="css/devAlpha.css" />

Thanks

[anzor_b]

Hi urbanglowcam,

1. Points are more tailored for print rather than screen and results will  vary depending on resolution and screen density. For best results, I suggest using pixel measurements described in UI guidelines. More on different measurements here: http://css-tricks.com/css-font-size/. I am looking into getting this updated from the documentation perspective.

2. If you are looking under Web Inspector (network tab), both files will be fetched, but only the styles from the matched pixel-ratio (devAlpha.css) should be applied. This will only work along with the meta script I described because that allows the device to return the native pixel ratio rather than CSS pixel-ratio. You can also check which style (and file) is applied by highlighting an item under the "Elements" tab in Web Inspector.

[urbanglowcam]

Thanks Anzor.

1. Yeah, I'm familiar with the different type units and usually use pixels, but with the bb10 typography guidelines mentioning standard font sizes in points, I assumed that we could work with them (i.e. 11pt, 8pt, 6pt, etc.). Otherwise, shouldn't they just list them in pixels?

"BlackBerry 10 uses four font weights (medium, regular, light, and light italic) and five font sizes (point size 5, 6, 8, 11, and 14). The leading is set to 20% greater than the font size."

I guess with pixels working just fine for me, I will stick with that. I was just a little confused, that's all.

2. I realized what the issue is here for me. I was wrong before and the dev alpha actually displays correctly with the stylesheet devAlpha.css. But the Ripple plug-in (using the dev alpha mode) emulates the app with the Playbook.css stylesheet attached. Once the .bar is packaged and launched though (on the actual dev alpha), it points to the devAlpha.css. Is this a bug with Ripple?

[anzor_b]

1. Our apologies for the confusion; the UI guidelines were designed with Cascades (primarily) in mind and I am currently working on getting them aligned with WebWorks.

2. It seems that Ripple UI returns a devicePixelRatio of 1, which is why the work-around does not function. I have logged a new issue regarding this here: https://github.com/blackberry/Ripple-UI/issues/606

[urbanglowcam]

Okay. Just making sure I wasn't doing something incorrectly there since I'm a little new with app development and coming from a web/graphic design background.

Thanks so much for the help. I'm really enjoying developing for BB10.

[ahrepost]

hi..

i have question regarding viewport.

i want to be able to zoom in-out on an <iframe> but how can i prevent the action bar from zooming?

my code:

<div data-bb-type="screen" data-bb-effect="fade">

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

<iframe width="768" height="1280" src="http://blackberry.com" scrolling="yes" ></iframe>
</meta>
</div>

<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>

thanks

[anzor_b]

hi ahrepost,

My apologies for the delay.

iframe will definitely work, you just have to include the meta tag in the <head> of the html document (not in the body like you have it).

Note: make sure you give the iframe style="border:0", because I noticed there's a border of 2 px automatically applied to iframes and this causes scrolling of the whole app.

Here's the code:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style>
		body,html{
			margin:0;
			padding:0;
		}
		iframe {
			border: 0;
		}
		footer{
			position:fixed;
			bottom:0px;
			height:100px;
			width:100%;
			background:white;
			z-index:4;
		}
		</style>
  </head>
  <body>
  	<iframe width="100%" height="100%" src="http://blackberry.com" scrolling="yes" ></iframe>
	<footer></footer>
  </body>
</html>

[ahrepost]

@anzor, thank you for the reply

I think you misunderstood my question

i want to set user-scalable=yes, so i can zoom in / out but i need the action-bar with fixed size & position

so far the action-bar also got zoomed whenever i zoom in/out on the screen

screen:

on zoom:

is there a way to prevent this?

thanks

[tneil]

This is a situation where you can't really have your cake and eat it too. The viewport setting just don't allow for it.

You'll likely want to use a JS toolkit something like hammer.js that gives you pinch to zoom gestures.