如何仅在iPhone横向模式(视口元标记)中定义网站宽度?

时间:2012-04-14 22:04:48

标签: iphone html css viewport responsive-design

我的网站在iPhone 2G,3G和4S纵向模式下的宽度设置为460px。但它在水平模式下看起来并不好看。我会说它应该有两倍的像素。

我当前的视口标记如下所示:

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

我想在纵向模式下使用460px 我想在横向模式下使用800px。

这是Apple的文档,但未提及水平模式:https://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

1 个答案:

答案 0 :(得分:1)

您是否尝试过使用常量“设备宽度”?

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

我还使用以下技术在页面加载后修改元标记。当设备在纵向和横向之间切换时,您可能会对其进行修改以修改元标记:

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 ];