我们正在构建针对平板电脑开发的HTML5 / JavaScript应用,我们希望在横向和纵向方面对屏幕进行不同的布局。
最初,我们正在捕捉方向变化通知,并跟踪当前方向(通常报告为0度,90度,-90度或180度 - 请参阅this question)。不幸的是,不同的设备会报告different orientations as "0"。该链接认为这是一个错误,但有一些证据证明这是按设计工作的 - 例如,this article表明“横向”是默认方向,并且这些设备报告方向为“0”时以横向模式举行。
我们接下来试着只看实际的屏幕尺寸,假设当宽度大于高度时,我们处于横向模式。但是当显示屏幕键盘时,此算法会混淆 - 当显示键盘时,将返回可见区域的尺寸。严格来说,当设备处于纵向模式时,但是屏幕未被键盘遮挡的部分比它高。
对this question的回复相当陈旧。这仍然是最好的答案吗?有没有人有一个好的算法,可以考虑键盘的可见性?
答案 0 :(得分:4)
试试这个:
<span id="orientation">orientation</span>
$(document).ready(checkOrientation);
$(window).resize(checkOrientation);
function checkOrientation() {
var orientation = "Portrait";
var screenWidth = $(window).width();
var screenHeight = $(window).height();
if (screenWidth > screenHeight) {
orientation = "Landscape";
}
$("#orientation").html(orientation);
}