CODEWITHSUNDEEP
iphonehtmlcssviewportresponsive-design
Atadj
Atadj

Reputation: 7180

How do I define website's width only in iPhone's landscape mode (viewport metatag)?

My website has width set to 460px on iPhone 2G, 3G and 4S in portrait mode. It doesn't look good in horizontal mode though. I would say it should have twice as many pixels.

My current viewport tag looks like this:

<meta name="viewport" content="user-scalable=yes, width=460" />

I want 460px in portrait mode.
I want 800px in landscape mode.

This is Apple's documentation but horizontal mode is not mentioned: https://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Upvotes: 0

Views: 826

Answers (1)

TomSwift
TomSwift

Reputation: 39512

Have you tried using the constant "device-width"?

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

I've also used the following technique to modify the meta tag after the page has been loaded. You could likely adapt it to modify the meta tag when the device changes between portrait and landscape:

NSString* js = 
@"var img = document.getElementsByTagName( 'img' )[0];" \
"var c = 'width=' + img.width + ', height=' + img.height + ', user-scalable=yes, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0';" \
"var h = document.createElement( 'head' ); " \
"var m = document.createElement( 'meta' ); " \
"m.setAttribute( 'name', 'viewport' ); " \
"m.setAttribute( 'content', c ); " \
"h.appendChild( m ); " \
"var html = document.getElementsByTagName( 'html' )[0];" \
"var body = document.getElementsByTagName( 'body' )[0];" \
"html.insertBefore( h, body ); " \
"";
[webView stringByEvaluatingJavaScriptFromString: js ];

Upvotes: 1

Related Questions