Question

Hello I’m currently creating a mobile site for a business. And I wanted to know if when coding my heading and formatting if there is a specific resolution size I need to be working with. I’ve been given two different resolutions through Dreamweaver (currently only developing for iphone or similar smart phone, no tablets). I was given 320×480 and 480×800, is there a specific size i should be working in? Or is there a way to make my header banner and other images scale by themselves inside an area. I hope this makes sense for the most part!

Answer 1

you can use CSS3 Media Queries:

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}