Javascript iPad 不会触发从垂直到水平的调整大小事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2740857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPad doesn't trigger resize event going from vertical to horizontal?
提问by dclowd9901
Has anyone noticed this behavior? I'm trying to write a script that will trigger upon a resize. It works fine on normal browsers, works fine on iPhone, but on iPad, will only trigger going from horizontal to vertical viewport, not vice versa.
有没有人注意到这种行为？我正在尝试编写一个将在调整大小时触发的脚本。它在普通浏览器上工作正常，在 iPhone 上工作正常，但在 iPad 上，只会触发从水平视口到垂直视口，反之亦然。
Here's the code:
这是代码：
$(window).resize( function() {
var agent=navigator.userAgent.toLowerCase();
var is_iphone = ((agent.indexOf('iphone') != -1));
var is_ipad = ((agent.indexOf('ipad') != -1));
if(is_iphone || is_ipad){
location.reload(true);
} else {
/* Do stuff. */
};
});
回答by Vincent
If I understood you correctly, you want to do something when the user tilts the iPad. Here you go:
如果我理解正确的话，当用户倾斜 iPad 时，您想要做一些事情。干得好：
window.onorientationchange = function(){
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0){
// iPad is in Portrait mode.
}
else if (orientation === 90){
// iPad is in Landscape mode. The screen is turned to the left.
}
else if (orientation === -90){
// iPad is in Landscape mode. The screen is turned to the right.
}
}
回答by artlung
I think what you want would be to use the iPad Orientation CSS, which looks like this:
我想你想要的是使用iPad Orientation CSS，它看起来像这样：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
Also, the orientationchangeevent fires when the orientation is changed, according to iPad web development tips.
此外，orientationchange根据iPad Web 开发技巧，当方向改变时会触发该事件。
Together, that should give you tools enough to deal with the change.
总之，这应该为您提供足够的工具来应对变化。
回答by user1149756
This includes all orientations.
这包括所有方向。
Here are two options:
这里有两个选项：
window.onorientationchange = function() {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0) {
// iPad is in Portrait mode.
} else if (orientation === 90) {
// iPad is in Landscape mode. The screen is turned to the left.
} else if (orientation === -90) {
// iPad is in Landscape mode. The screen is turned to the right.
} else if (orientation === 180) {
// Upside down portrait.
}
}
or
或者
// Checks to see if the platform is strictly equal to iPad:
if(navigator.platform === 'iPad') {
window.onorientationchange = function() {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0) {
// iPad is in Portrait mode.
} else if (orientation === 90) {
// iPad is in Landscape mode. The screen is turned to the left.
} else if (orientation === -90) {
// iPad is in Landscape mode. The screen is turned to the right.
} else if (orientation === 180) {
// Upside down portrait.
}
}
}
回答by B-Money
You want this fix for the orientation bug on iphone and ipad.read about it here: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
您希望针对 iphone 和 ipad 上的方向错误进行此修复。在这里阅读：http: //www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
github newest version here: https://gist.github.com/901295use the second version on the page.
github 最新版本在这里：https: //gist.github.com/901295使用页面上的第二个版本。
回答by Nick Craver
The only thing I could find from apple:
Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position "fixed" to the viewport can end up outside the viewable content area, offscreen.
iPad 上的 Safari 和 iPhone 上的 Safari 没有可调整大小的窗口。在 iPhone 和 iPad 上的 Safari 中，窗口大小设置为屏幕大小（减去 Safari 用户界面控件），用户无法更改。要在网页上移动，用户可以在双击或捏合以放大或缩小，或通过触摸和拖动平移页面时更改视口的缩放级别和位置。当用户更改视口的缩放级别和位置时，他们会在固定大小的可查看内容区域（即窗口）内执行此操作。这意味着其位置“固定”到视口的网页元素可能会出现在屏幕外的可查看内容区域之外。
I understand the "works on the iPhone" part...but maybe it doesn't anymore? This could be a change in OS/mobile Safari since the latest public iPhone OS release shipped (the above documentation is from March 2010).
我理解“在 iPhone 上工作”的部分……但也许它不再是了？这可能是自最新的公开 iPhone 操作系统发布以来操作系统/移动 Safari 的变化（上述文档来自 2010 年 3 月）。
I'm going to re-tag this question adding iPhone to it, maybe one of the guys with the developer 4.0 OS release can test this? If it is the case it's been removed, this should be a bug filed/fixed before it goes live...I'm not sure on how the procedures are on this with Apple are though.
我要重新标记这个问题，将 iPhone 添加到它，也许开发人员 4.0 操作系统版本的一个人可以测试这个？如果是这种情况，它已被删除，这应该是一个在上线之前提交/修复的错误……不过，我不确定 Apple 的程序如何。
回答by JoeDuncan
Check your version of iOS.
检查您的 iOS 版本。
The "orientationchange" event does not work in iOS 3.*, but it does in 4.*
"orientationchange" 事件在 iOS 3.* 中不起作用，但在 4.* 中起作用
回答by SteakOverflow
- do a nice check if your platform is iPad,
handle the iOS specific event orientationchange by catching window.onorientationchange
if(navigator.platform == 'iPad') { window.onorientationchange = function() { // handle orientationchange event // (here you can take advantage of the orientation property // - see the good answer above by Vincent) } }
- 好好检查一下你的平台是否是 iPad，
通过捕获 window.onorientationchange 来处理 iOS 特定的事件orientationchange
if(navigator.platform == 'iPad') { window.onorientationchange = function() { // handle orientationchange event // (here you can take advantage of the orientation property // - see the good answer above by Vincent) } }
