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

New Member
Posts: 1
Registered: ‎04-24-2013
My Device: Z10
My Carrier: 6137248674

HTML5 Rendering problems with http://www.pohperformance.com/TBM/TBM.htm

I can't horizontally scroll on this page:



It seems as if the screen width doesn't match the CSS width reported by the BB10 Z10 browser.


This page is written HTML5 JavaScript and renders fine on iOS and Android (Nexus 7).   Desktop versions of IE9+, Firefox, Safari and Chrome also work for this page.


BTW - Using the Chrome Ripple emulator on chrome (Z10 emulation) renders it fine, but not on the actual BB10 device (Software Release

Posts: 165
Registered: ‎09-24-2012
My Device: Passport
My Carrier: Bell

Re: HTML5 Rendering problems with http://www.pohperformance.com/TBM/TBM.htm



I have a feeling this application is expecting the resolution to be 1280x768 pixels, which is only true when setting up the viewport to match the pixel density on the device.


I see this page is using the following meta viewport tag:

content="width=device-width, initial-scale=1.0, maximum-scale= 1.0, user-scalable=no"


This means that the viewport will scale to a standard pixel density of ~148 ppi, vs. 355 ppi which is 521x342 on the BlackBerry Z10.


All webkit browsers are designed to provide this standard resolution, to ensure your code works accross devices with varying pixel densities.


Not sure what the application does for iOS/Android (I bet it's hardcoded), but these are designed the same way, and iOS 4 returns 480x320 even though the physical resolution is 960x640, so the developer needs to treat BlackBerry 10 with the same love, as not only do we have a high pixel density, but it's also higher than retina.


This is explained in the article here: http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...