I was wondering if anyone could give me an answer on how to make a stylesheet(s) for handheld devices that gives you cross browser, cross device, cross platform? How do you get your layout to work with the atleast common ones?
thanks in advance.
There's no single answer for this. You can use @media queries to modify your CSS rules based on the device width and other "responsive design" principles that use ems and percentages instead of pixels for measurements, but not all pages or layouts adapt easily to those methods without significant changes. You have some learning to do, but in the end it's all choices you make as a designer.
Thanks for the reply. I was just wondering is there a set of screen resolutions that you should make different stylesheets for? For example: 960px width, then for a cellphone 460px or something. Is there like set of common width that you need to design for so you can cover the most common devices? Sorry if this isn't very clear I just really to figure this out for my school project.
It's been a while since I researched this, but I believe the nominal width of the iPhone is 320px, and I use that for my media queries for this. From there, I rely on percentages to allow for other screen widths so I don't need to focus on particular dimensions. Again, not all designs lend themselves to this approach. It's just one aspect of dealing with the issue. Good luck!
There is a Web Developer add-on to firefox, that I use to view my sites. It will render a page with multiple views, as:
Mobile Portrait (320x480)
Mobile Landscape (480x320)
Small Tablet Portrait (600x800)
Small Tablet Landscape (800x600)
Tablet Portrait (768x1024)
Tablet Landscape (1024x768)
I don't know about the accuracy, but those are the boundaries I use for media queries.