08-29-2011 06:42 PM
Hi Guys:
I have question regarding display new devices 9900/9930.
I am developing an application using webworks. It works fine on OS5/OS6 devices like bold/torch. But when I test it on 9900, it looks zoomed.
Here are few issues we are getting:
Here is code I am using to test.
<head>
<meta name="viewport" id="viewport" content="height=device-height,width=device-width,i
<title>Untitled Page</title>
<link rel="stylesheet" href="css/main.css" type="text/css"></link>
<script type="text/javascript" src="scripts/main.js"></script>
</head>
<body>
<div>
<div id="topbutton4" class="button" x-blackberry-focusable="true"><img src="images/button4.png" /></div>
<div id="topbutton5" class="button" x-blackberry-focusable="true"><img src="images/button5.png" /></div>
</div>
<div id="heading" style="border:1px solid red; width:640px;">
This is test 640 PX
</div>
<div style="border:1px solid green; width:480px;">
This is test 480 PX
</div>
<div style="border:1px solid yellow; width:360px;">
This is test 360 PX
</div>
<div id="content">
<p x-blackberry-focusable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis condimentum risus,
sit amet hendrerit urna hendrerit sit amet. Phasellus egestas urna non tellus rhoncus sit amet
volutpat erat tempus. Quisque sed augue quis libero adipiscing suscipit. Cras vitae elementum nisi. </p>
</div>
</body>
Thanks
Solved! Go to Solution.
08-31-2011 10:00 AM
Hi there, thanks for the great questions.
The content scaling issue you are reporting has to do with the existing viewport defined in your content and the greatly increased screen resolution of the 9900 Smartphone. By default the rendering engine tries to normalize Web content to 'look' like it does on other BlackBerry Smartphone (to reduce impact to existing content). However, this can have the side effect of rendering content that looks too closely zoomed in depending on the viewport.
Here is the viewport you have:
<meta name="viewport" id="viewport" content="height=device-height,width=device-width,i
Here is the recomended viewport I suggest you use:
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1.0">
Note the addition of the "target-densitydpi property and the removal of the height property. This property tells the rendering engine to recognize the increased screen resolution of the device, and take that into consideration when scaling content to the screen.
Hope that helps.
Adam
Developer Relations
08-31-2011 02:04 PM
Thank you very much Adam for solution. It works like a charm.
Can you please suggest solution for third issue i.e. default blue rectangle for focusable element is not displaying for 9900. It works fine for 9800/9780 and other old devices?
Thanks Again
Harpreet
09-01-2011 08:51 AM
I've heard from another developer that the blue highlight is no longer appearing. Not sure if this is a defect that has been accidentally introduced, or an actual change in behavior. Recommend filing an issue in the WebWorks open source project: https://github.com/blackberry/WebWorks/issues
In the meantime, you can use CSS to style the element that currently has focus to achieve the blue highlight.
09-01-2011 10:53 AM
The default blue outline for the selected item using Focus based navigation not working on BB7 devices is a limitation of the BB7 release.
This functionality isn't supported on BB7. To provide highlighting you will need to style your elements using css:hover to change their color or outline.
09-01-2011 06:12 PM
02-10-2012 09:10 AM - edited 02-10-2012 09:10 AM
Wow, thanks Tim, Adam, great tip on the "target-densitydpi=device-dpi". Is there a link where can I read about this (and more on this subject) in the documentation, or KB artical?
I've been trying to solve this for days and did not know what terms to search for in Google (finaly got it with 9900 "device-width" 356).
This improved the screen layouts for all our cross-platform tests (we are using jquery mobile).
Thanks again,
Ross MacLachlan
Inawire Inc.
02-13-2012 08:23 AM
06-25-2012 09:53 AM
Share the link