I have this GWT app which I need to "fit" within the resolution of a mobile device.
It should not do side scrolling (the width should be the width of the phone screen) but vertical scrolling is required as the app will show list or result items.
The main widget is a GWT VerticalPanel that house some composite widgets.
Any ideas?
You have to set the viewport and/or scale properties for Mobile Browsers of Android/iPhone.
<!--
constraint viewport to device width,
set initial zoom level to 100%,
disable user zoom
-->
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no" />
Read more about all viewport options here: Targeting Screens from Web Apps
And instead of using ResizeHandler, you could also use LayoutPanels which should be added to RootLayoutPanel instead of RootPanel. LayoutPanel resize automatically when the Window is resized.
Resolution independent layout design is really a pain in the ass especially with GWT like web-apps.
Static web-pages usually rely on fixed layouts (960 grids) etc. However they are not really appropriate for GWT like web-apps.
You could try to use liquid/fluid layouts with min-width/max-widths and percentage values.
See below for more information:
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
http://www.maxdesign.com.au/articles/liquid/
However sometimes especially with mobile devices it makes sense to have a different user interfaces for desktop and mobile.
For example with a tablet it might make sense to have a navigation panel on the left side and a content panel on the right side. However on mobile phones it might make sense to just have a navigation panel and on clicking an item switching to the content panel.
There is a google io talk about the whole mobile/desktop aspect:
Google IO Talk
Code Sample
Related
Wondering if there is a way to blanket "magnify" an entire screen layout including all widgets & properties such as text scaling etc.
I have discovered there are a few screens which can do best as a simple magnification instead of a completely different layout when going from mobile to tablet sizes. Is there a way to shortcut this as opposed to totally different layouts?
The end goal would be nearly exact same layout but every element on tablet is larger.
If I open flickr.com and open Chrome's device emulator (or responsive view), I can drag and drop the right boundary to make the viewport smaller. If I drag it to the left, it leaves behind a dark grey background, as you can see in this screenshot:
I've tried it in other websites, and it doesn't always appear. It doesn't seem to represent <html> or <body>'s size, but I would like to know what it does mean.
That is just showing "Hey, content exists off-canvas." In other words, if you scroll more content is there.
I agree with Garbee, but it is more important to know when it happens.
If there is no viewport meta tag with width=device-width, then the browser will try to reescale the page to fit, but sometimes may be too big.
The other possibility is that the viewport meta tag is there but the withs are not 100% and may be wider than the actual width of your phone.
This may seem similar but are very different situations you must take into account.
With all types of screen resolutions and devices - desktop or mobile, it's kind of hard to pick the right widths for your website. In my case, the website is to present a photographer's work so I've opted for these widths:
1340px
1180px
1000px
480px
But say an iphone 4S (native res is 960 x 640) is positioned vertically, what wrapper would the device display? Would it resize the 1000px wrapper into 640px or would it pick the 480px?
You'll want to start by learning the basics of Responsive design. Check out : http://www.abookapart.com/products/responsive-web-design
Due to the ever changing nature of device sizes, you may want to avoid trying to target specific devices/resolutions. Start with a narrow screen and expand your window until the layout breaks. Add a breakpoint there. Continue expanding and adding breakpoints as your content dictates.
I have made a webpage using the 960 grid system. And I have made it nice and responsive, following the excellent advice found in www.alistapart.com
So when developing the CSS for my new webpage I kept checking in Dreamweaver's Multiscreen viewport testing option and found that my pages were stacking up nicely on smaller screens. No miniature text, no need for pinch and zoom.
Then when testing page live, I learn that Ipad and Iphone does not resize windows and I can only get a miniaturized version of my full screen webpage.
I am hoping there is a simple CSS way to override this, so that my webpage stacks in a responsive manner also on apple devices.
You can maybe try a fluid grid option, such as sprysoft variable grid system which is based on 960.gs, though it will still have a definite grid layout (just % based instead of px based)
This is a long shot but I'm hoping there's a way to stop IPhones from resizing a page on load. Problem is if it's a site with a lot of need for refreshing (Say a forum) it gets a little old for users to have to resize that page every refresh.
Is there a way to force Safari/The IPhnone to not minimize the site on refresh that doesn't involve a user changing a setting?
There is a meta tag you can use that will constrain the viewport for the iPhone:
<meta name="viewport" content="width=320" />
From Apple's developer documentation:
Use the viewport meta tag to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application, then set the width to the width of the device.
There is a constant you can use for the iPhone's device width: width=device-width.
Not sure if this link will work, but you can read more about Mobile Safari and the viewport tag on the Apple Developer website