Apple iPhone 4s, images 3872x2592

HTML & CSS
1

Wonder how many pixels an image can have in the Apple iPhone 4s. Tried my site today with images that are 3872x2592px.

I had put text over the pictures and saw that the text is presented from the top to the bottom of the images. On other phones and computers, the text is 20% from top to bottom of the picture.

Kind of like the pictures turned up-tight so they would fit on the screen. But the text size was of normal height.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
2

To give you an idea of how many pixels you have to work with, the resolution of the iPhone 4S viewport is 960-by-640.

3

Honestly, those are way too large for most or all devices. It’s not practical to use images that size online, not least because of the bandwidth they are likely to chew up.

4

Ok, but I’ll make a web page with large images one after another in a row (in the size that I specified).

However, I change the pictures at

@media screen and (max-width: 567px) {
and have at the moment chosen a size of 1936x1296px to 4 images in a row.
But I may go to an iPhone business tomorrow and test.

5

Ok, is there any computer that is slightly bigger than the iPhone, which also scales images to a smaller size?

In my CSS I use:

@media screen and (max-width: 480px),(max-height: 480px) {

to get my big pictures disappear in the iPhone

6

I’m not sure that will make them disappear … but remember that people still have to download them, which is a big issue on mobile browsers.

7

I´m going to use a 1px wide transparent picture @ max-width 480px, but I was not sure if there is a bigger iPhone wider then 480px and if that scale images.

8

The general widths to aim for in an iPhone are 360px wide in portrait and 480px wide in landscape. (That’s the the actual dimension, but the dimensions they pretend to use.)