CODEWITHSUNDEEP
iphonehtmlmobile-safari
Smallinov
Smallinov

Reputation: 1272

iPhone Full Screen Image

How do I go about making an image or section of the page full screen on the iPhone?

I have an image that is 480 x 320 and I want to pull that up full screen on the iPhone but it has to be within a webpage so that I can make the image a link back to the previous page.

Currently if I drop the image on a blank page and I open it up on the iPhone it just shows up in the top left corner.

Upvotes: 8

Views: 15689

Answers (3)

mtimtner
mtimtner

Reputation:

nice links which may help you further:

How to optimize your website for mobile devices: http://solutions.treypiepmeier.com/2008/12/01/optimizing-a-website-for-iphone/

Upvotes: 2

Hans Sjunnesson
Hans Sjunnesson

Reputation: 22289

Hopefully I'm not in breach of the NDA here, but here goes.

Mobile Safari, by default, renders a page as if that page had been viewed by a desktop browser, with a default width of 980 pixels.

To change this behavior you need to explicitly declare the viewport, which you do via meta tags. If you declare the width to the constant device-width, it'll default to 320 instead of 980, and everything looks great.

<head>
    <meta name="viewport" content="width=device-width,user-scalable=no" />
</head>

Upvotes: 18

Andy Jeffries
Andy Jeffries

Reputation: 402

I'd say set the viewport meta tag in your blank page so Safari knows to render the page at the right size. For more information, see this link:

Apple iPhone Safari Documentation

Upvotes: 5

Related Questions