如何仅在iPhone的横向模式（视口元标签）中定义网站的宽度？

我的网站在iPhone 2G，3G和4S纵向模式下的宽度设置为460px。尽管如此，它在水平模式下看起来不太好。我会说它应该有两倍的像素。如何仅在iPhone的横向模式（视口元标签）中定义网站的宽度？

我现在的视口代码看起来是这样的：

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

我想460像素的纵向模式中。
我想在横向模式下使用800px。

这是苹果的文档，但水平模式没有被提及：https://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

来源

2012-04-14 Atadj

而其他设备又如何？你应该使用百分比而不是固定值吗？ – 2012-04-14 22:09:23

如果你可以考虑在CSS样式中应用限制你的页面大小，那么我确实建议在CSS中进行媒体查询，它们对于针对各种设备的各种方向的网页开发可能非常有用。 – iDroid 2012-04-14 22:38:05

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

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

来源

2012-04-14 22:22:15 TomSwift

如何仅在iPhone的横向模式（视口元标签）中定义网站的宽度？

回答

相关问题