Blackberry Simulator not rendering web page in the same fashion as physical device? (Z10)

Question

The web page found here renders well in the BlackberryOS 10 Webkit browser within the VMWare Fusion simulator, but not on an actual device (I'm told, I don't have a physical Blackberry in front of me).

The first screenshot is what I'm told the page looks like on BlackberryOS 10, the second is what I see in the emulation. I tried it on all 6 device sizes provided by the Blackberry Simulator and it looks good.

Edit: This seems to have something to do with the Blackberry Keyboard

Ideas?

Answer 1

The Blackberry keyboard seems to displace the size of the actual page outside of the viewport. Opening the keyboard is the only way to replicate this issue within the simulator.

I tried to compensate changing media queries to use the max-device-width and min-device-width properties as well as using units relative to the viewport (vh and vw), but it just wasn't perfect on all devices.

I used the following JavaScript to load a stylesheet for only BlackBerry devices:

    var ua = navigator.userAgent;
    if (ua.match(/(BlackBerry|Blackberry|blackberry|BB|bb|RIM|rim|Playbook|PlayBook|playbook)/)!=null) { 
        document.write('<link rel="stylesheet" type="text/css" href="blackberry.css">');
        console.log ('Blackberry confirmed'); 
    }

The only issue with this is that the Blackberry simulator's userAgent cannot be targeted with a regular expression because there's nothing unique about it. The code above does target all physical BlackBerry devices though.