转:http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application
This is a pretty hacky solution, but it's at least something(?). The idea is to use a CSS transform to rotate the contents of your page to quasi-portrait mode. Here's JavaScript (expressed in jQuery) code to get you started:
$(document).ready(function () { function reorient(e) { var portrait = (window.orientation % 180 == 0); $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : ""); } window.onorientationchange = reorient; window.setTimeout(reorient, 0); });The code expects the entire contents of your page to live inside a div just inside the body element. It rotates that div 90 degrees in landscape mode - back to portrait.
Left as an exercise to the reader: the div rotates around its centerpoint, so its position will probably need to be adjusted unless it's perfectly square.
Also, there's an unappealing visual problem. When you change orientation, Safari rotates slowly, then the top-level div snaps to 90degrees different. For even more fun, add
body > div { -webkit-transition: all 1s ease-in-out; }to your CSS. When the device rotates, then Safari does, then the content of your page does. Beguiling!
How do I lock the orientation to portrait mode in a iPhone Web Application?
本文提供了一种通过CSS变换来使iPhone上的网页应用在横屏时返回到竖屏模式的方法。利用JavaScript检测设备方向,并旋转页面内容以适应竖屏显示。

被折叠的 条评论
为什么被折叠?



