Jquery 旋转到横向时的左边距
我使用的是JQuery视差滑块效果。所有东西都适合iPad的屏幕，除了当我从横向旋转到纵向时，有一个大约120像素的右边距将我的滑块内容推到右侧 我已尝试设置视口标记Jquery 旋转到横向时的左边距,jquery,ipad,responsive-design,Jquery,Ipad,Responsive Design,我使用的是JQuery视差滑块效果。所有东西都适合iPad的屏幕，除了当我从横向旋转到纵向时，有一个大约120像素的右边距将我的滑块内容推到右侧 我已尝试设置视口标记 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 但这并没有起到任何作用。当我直接在肖像中进入页面时，它是好的。只有当我从横向旋转到纵向时，才会添加右边距。“纵向到横向”可适当调整
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
一个快速、肮脏的修复方法可能是在
主体上触发onorientationchange
事件时，执行一种重置边距的方法
因此，示例代码如下所示：
<body onorientationchange= "fixMargins()">
....
function fixMargins() {
var orientation = window.orientation;
switch (orientation) {
case 0: // portrait
$('div').css('margin-right', '40px');
break;
case 90: // landscape left
$('div').css('margin-right', '40px');
break;
case -90: //landscape right
$('div').css('margin-right', '40px');
break;
case 180: // portrait upside down
$('div').css('margin-right', '40px');
break;
}
}
....
函数fixMargins（）{
var方向=window.orientation；
开关（方向）{
案例0://肖像
$（'div'）.css（'margin-right'，'40px'）；
打破
案例90://左
$（'div'）.css（'margin-right'，'40px'）；
打破
案例-90://景观权
$（'div'）.css（'margin-right'，'40px'）；
打破
案例180：头像倒置
$（'div'）.css（'margin-right'，'40px'）；
打破
}
}
显然，这并不理想，您更希望对发生这种情况的原因进行解释。但我只是觉得我建议将此作为一个快速解决方案，我认为您必须检查方向更改事件，并以这种方式设置所需的边距：
$(window).bind('orientationchange', function(e){
if(e.orientation){
if(e.orientation == 'portrait'){
//do something
//about your margins for portrait
}
else if(e.orientation == 'landscape') {
//do something
//about your margins for landscape
}
}
});
为什么将边距设置为40px？同样，这种情况只发生在从风景画到肖像画的过程中，当回到风景画时，40px只是我选择的一个随机数，它是固定的。在你的情况下，你会用任何好看的东西来代替它。如果只是在从横向到纵向时，那么只需保留案例0:
和案例180:
的代码，我必须这样做，而不是使用您的解决方案。我很高兴您修复了此问题，但您必须意识到，该链接上的顶部答案与我的答案基本相同。两者都利用了onorientationchange事件。编辑：哎呀，我刚意识到我的代码有错。抱歉不确定这是否有帮助，但请尝试在视口标记中添加“user scalable=no”否？