I am creating an extremely simple web page: it simply shows images one after the other until the bottom of the page.
Problem is... I am not sure what size images we should be using.
What is the ideal width of the images in a vertical browser?
Does this differ between android and iphone?
Just use the viewport size tag so the mobile devices will automatically resize the page to the correct dimensions.
You can for example just make a page which is 1024 pixels wide and define the viewport meta tag to be 1024px so all screens know it is supposed to be rendered as if the total screen width is 1024 px.
<meta name="viewport" content="width=1024">
This way you don't have to change the width of your design for each device. The device will scale the page for you to fit the screen.
Most mobile sites use a 480px width. Perhaps to improve loading time you better also use a smaller one since smaller images load faster and the phone will resize them anyway.
PS: Works on all modern devices across all platforms.
