Hello friends,

 

What should be the screen size we should maintain for making iphone websites?

This Apple page says that the iphone screen display is 960*640 which surprises me:-

http://www.apple.com/iphone/specs.html

Old iphones had 480*320

http://osxdaily.com/2009/09/26/iphone-screen-resolution-is-480-x-320-pixels/

I believe that a lot of hand-held devices are only 320px wide, so that may be safer if it scrolls in the lenght.

When making iphone websites i always use 320 wide, height doesnt matter as it scrolls.

 

So that it fits to all mobile devices i use this neat bit of code within the header

 

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> 

 

which scales it to the width of the device

 

The reason i do 320px wide is so it is compatible with older models.

 

Hope this helps if so please click the nice green plus sign

Hi

I was very interested in reading this question, as I am new to website design. What if you are designing a standard website, for computers, but that could possibly be used on a mobile device. Will it scale down successfully? Or is there something else that needs to be done?

 

Thanks,

 

Kath

if you do a website to the computers res, then using the script that RobertG posted, will probably resize it without a problem

Will the script RobertG posted ignore min-width?

should do yes. Its basically saying, scale the site down to fit the dimension of the screen. but dont get any bigger either. So in theory, yes it should ignore it

Sorry to bring this up as I know it's quite old, but I have a question regarding the code RobertG posted. If that meta tag reduces the width to fit if it is a smaller device, does that mean we can define the width of elements within the site...such as a wrapper, heading, footer etc?

 

I'm fairly new to Mobile Web but from what I understood, it was recommended that we steer clear of defining widths, or instead use percentages, so that the design automatically adjusts to the screen size. Is that not similar to what is happening here?

not 100% sure, but you should be able to..the smallest res is 800x600 for computers so as long as the whole website does not go over 800px wide, then you should be ok. The same goes for mobiles, find out the smallest mobile phone resolution, that has access to the internet, then make your site to those dimensions. Or you could have a directory in websites root that mobiles use. so in your root, have a directory called mob_devices then put in some detection script on the main sites index page, so that when a user with a mobile device goes on our website, the site in the mob_devices directory gets displayed

 

Ash

Edited December 30, 201015 yr by Ash Scott