iPad的方向改变后,绝对定位正常。页面首次加载时没有定位。
如何将页面加载到正确位置的正确位置?
<script type="text/javascript">
window.onorientationchange = detectIPadOrientation;
function detectIPadOrientation() {
if (orientation == 0) {
//alert ('Portrait Mode, Home Button bottom');
var elementStyle = document.getElementById("emkeypos").style;
elementStyle.position = "absolute";
elementStyle.top = "390px"
elementStyle.left = "20px";
} else if (orientation == 90) {
//alert ('Landscape Mode, Home Button right');
var elementStyle = document.getElementById("emkeypos").style;
elementStyle.position = "absolute";
elementStyle.top = "470px"
elementStyle.left = "30px";
} else if (orientation == -90) {
//alert ('Landscape Mode, Home Button left');
var elementStyle = document.getElementById("emkeypos").style;
elementStyle.position = "absolute";
elementStyle.top = "470px"
elementStyle.left = "30px";
} else if (orientation == 180) {
//alert ('Portrait Mode, Home Button top');
var elementStyle = document.getElementById("emkeypos").style;
elementStyle.position = "absolute";
elementStyle.top = "390px"
elementStyle.left = "20px";
}
}
</script>
<div id="emkeypos">
<a href="contest.html"><img src="#httploc#/expmeridian/assets/customer/EMkey.png" width="50px"></a>
</div>
答案 0 :(得分:0)
这两步:
将您的脚本(所有这些)移动到HTML的底部,就在结束</body>
标记之前。这样,下载脚本并不会阻止渲染页面; (与你的问题更相关)他们试图采取行动的因素将在他们运行之前存在。更多:YUI Best Practices for Speeding Up your Website
添加对您的函数的调用:
detectIPadOrientation();
附注:不需要type
属性,JavaScript是默认值。
所以(见评论):
<div id="emkeypos"><a href="contest.html"><img src="#httploc#/expmeridian/assets/customer/EMkey.png" width="50px" ></a></div>
<!-- MOVED SCRIPTS -->
<script>
window.onorientationchange = detectIPadOrientation;
detectIPadOrientation(); // <=== ADDED CALL
function detectIPadOrientation () {
if ( orientation == 0 ) {
//alert ('Portrait Mode, Home Button bottom');
var elementStyle = document.getElementById("emkeypos").style;
elementStyle.position = "absolute";
elementStyle.top = "390px"
elementStyle.left = "20px";
}
else if ( orientation == 90 ) {
//alert ('Landscape Mode, Home Button right');
var elementStyle = document.getElementById("emkeypos").style;
elementStyle.position = "absolute";
elementStyle.top = "470px"
elementStyle.left = "30px";
}
else if ( orientation == -90 ) {
//alert ('Landscape Mode, Home Button left');
var elementStyle = document.getElementById("emkeypos").style;
elementStyle.position = "absolute";
elementStyle.top = "470px"
elementStyle.left = "30px";
}
else if ( orientation == 180 ) {
//alert ('Portrait Mode, Home Button top');
var elementStyle = document.getElementById("emkeypos").style;
elementStyle.position = "absolute";
elementStyle.top = "390px"
elementStyle.left = "20px";
}
}
</script>
</body>
</html>