If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

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
harpreetgill
Posts: 7
Registered: ‎05-19-2011
My Device: 9900,Playbook
My Carrier: Rogers
Accepted Solution

9900/9930 display issues

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:

 

  1. Image with dimensions 640*100 is not fitting into 9900 screen. I tested it on both simulators 9900/9930. Got similar results i.e. image goes out of mobile screen. Image of width 400px fits fine to screen.
  2. On actual device it looks like images with 360px fits to screen instead of 640px. So different behavior on actual device and simulator.
  3. Also Default hover effect on focusable element is not working for me. Is it not supported for 9900 or I am missing something.

Here is code I am using to test.

 

<head>
        <meta name="viewport" id="viewport" content="height=device-height,width=device-width,initial-scale=1.0,user-scalable=no" />
        <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

Please use plain text.
Administrator
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: 9900/9930 display issues

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,initial-scale=1.0,user-scalable=no" />

 

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

 

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
New Contributor
harpreetgill
Posts: 7
Registered: ‎05-19-2011
My Device: 9900,Playbook
My Carrier: Rogers

Re: 9900/9930 display issues

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

Please use plain text.
Administrator
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: 9900/9930 display issues

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.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: 9900/9930 display issues

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.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Contributor
harpreetgill
Posts: 7
Registered: ‎05-19-2011
My Device: 9900,Playbook
My Carrier: Rogers

Re: 9900/9930 display issues

Thanks Tim for clarifying this.
Please use plain text.
Contributor
inawire
Posts: 33
Registered: ‎07-08-2010
My Device: Bold 9700/9900 - Playbook v2.0.xxx
My Carrier: Telus

Re: 9900/9930 display issues

[ Edited ]

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.

 


Please use plain text.
Contributor
inawire
Posts: 33
Registered: ‎07-08-2010
My Device: Bold 9700/9900 - Playbook v2.0.xxx
My Carrier: Telus

Re: 9900/9930 display issues

Please use plain text.
Trusted Contributor
chicoxml
Posts: 227
Registered: ‎09-03-2010
My Device: Not Specified

Re: 9900/9930 display issues

Share the link

Please use plain text.