Trying to get the width of the document in jQuery so I can position a signature capture element on the page. However the page width is reporting exactly a half of what Rho.System says.
I have a meta tag in that's making sure it's not zoomed.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
When I do a $(document).width(); in jQuery I get 360 back.
When I do a Rho.System.screenWidth it's returning 720.
What would cause this? I could obviously multiply the values to position these elements properly, however it's obviously a hack so I'd prefer to work out what I'm doing wrong here.
If it's helpful I am using a Samsung galaxy s3 to test on.
Most portable devices with high-resolution screens use a device pixel ratio. The browser works in pixel units that are some sub-multiple of the actual resolution.
For example, iOS Retina devices have a device pixel ratio of 2.
$(document).width reports in browser pixels.
Rho.System.screenWidth reports in device pixels.
You can easily determine the device pixel ratio: