Dreamweaver CS5 comes with a feature called ‘multiscreen’ that you’re going to find handy – no doubt about it.
Mobile web sites are becoming more and more popular among the general populace, so a quick and relatively easy way of checking the basics of your website and adding in media queries is going to be very handy.
The multiscreen preview comes with three default settings:
- Phone: 320 x 300px
- Tablet: 768 x 300px
- Desktop: 1126px wide
These three settings can be changed easily as well – by clicking “Viewport Sizes” in the multiscreen preview screen.
Some common settings you may want to use are:
- Apple iPad: 1024 x 768px
- Samsung Galaxy Tab: 1024 x 600px
- Apple iPhone 4: 640 x 960px
- Apple iPhone 3GS: 320 x 340px
- Sony PSP: 480 x 272px
- Motorola Atrix: 540 x 960px
- Samsung Galaxy S2: 480 x 800px
- HTC Desire HD: 480 x 800px
But Be Careful
It’s not a real ‘browser’ as such – it’s just a preview. Dynamic content, like movies and audio clips, may not display as it would live.
Next week, we’ll use Dreamweavers’ multiscreen preview to create a simple, dynamic web design for a standard phone, tablet and desktop, using CSS media queries, so don’t forget to check back next Tuesday!
It’s a very handy tool, that along with the ‘resizer bar’ in safari, make designing to the correct size a lot better on a 27inch imac.
Where is it in CS5 I can only find it in CS 5.5 (By the way your form doesn’t mark required fields)