Strange results for Window.getClientWidth() on mobile safari vs UIWebView

[markww]

Hi,

I've got a GWT app which simply reports the client width:

    Label label = ...;

    label.setText("Client width: " + Window.getClientWidth());

I'm getting strange results on an iphone 4S (retina device).

When run from mobile safari, it reports 980 pixels, which is expected.

I then created a native ios app, dropped a full-width UIWebView in. Loading the same page on the same device from the UIWebView, it reports 320 pixels.

I can't figure out what's going on with the UIWebView - it seems like it's forcing the page to think it's 320 pixels wide. Has anyone else experienced this?

I'm writing a game with <canvas>, and I'd like a 1:1 mapping to device pixels.

Thanks

[Jens]

980 pixel is the default width mobile safari zooms websites to if they dont provide any viewport meta information. When you choose "device-width" in the meta tag the website dimensions will be set to 320x480 for both retina and non-retina iPhones (and I guess its the size that is also reported by UIWebView). The only difference is that the JS property window.devicePixelRatio should return 2 on the retina display iPhone because every pixel is doubled.

So if you want super sharp graphics on retina iPhone you have double size everything and then display it 50% smaller. In case of your canvas you would have a canvas with 320x480 css size, a canvas coordinate space of 640x960 and finally a scale factor of 2 for your paint operations.

See: http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

-- J.

[Mark Wyszomierski]

Thanks, I was expecting mobile safari and UIWebView to behave the same way (big mistake). I'll have a go from there,

Thanks

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/TQFq60loAI8J.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.