2

我正在开发一个移动网络应用程序。纵向模式下的应用程序必须具有与横向模式不同的外观。这就是我编写以下代码的原因：

function orientation(){
    if (window.innerHeight > window.innerWidth) {
        $('.ui-page').removeClass("pageL").addClass("pageP");
        $(window).resize();
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=400,user-scalable=no')
        $(window).resize();
        alert('portrait');
    } else {
        $('.ui-page').removeClass("pageP").addClass("pageL");
        $('meta[name="viewport"]').attr('content', 'initial-scale=1, maximum-scale=1');
        $(window).resize();         
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=960,user-scalable=no');
        $(window).resize();
        alert('landscape');
    };
};  

var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    orientation();
}, false);

在我的 Android 平板电脑上，一切都在 chrome 中运行，但在 iPad 和我的 Android 上的默认浏览器上却没有。在默认的 Android 浏览器中，问题是当我以纵向加载页面并将平板电脑旋转 90 度时，它再次执行该功能，但仍然说他是纵向的。在 iPad 上一切正常，但当我将其变为横向时不会再次缩小。iPad上的问题可能与iPad上禁用的调整大小功能有关，但我无法解决。

我使用 innerHeight & Width 因为一些 Android 设备将横向视为 0 度，而将纵向视为 0。

4

1 回答 1

0

在stackoverflow上浏览了很多之后，我设法制作了这段代码：

function orientation() {
  var content_width, screen_dimension;

  if (window.innerHeight > window.innerWidth) {
    // portrait
    $('.ui-page').removeClass("pageL").addClass("pageP");
    content_width = 400;        
    if(screen.width < screen.height){screen_dimension = screen.width * 0.9}
    else{screen_dimension = screen.height * 0.9}
  } else{
    // landscape
    $('.ui-page').removeClass("pageP").addClass("pageL");
    content_width = 960;
    if(screen.width > screen.height){screen_dimension = screen.width}
    else{screen_dimension = screen.height}
  }

  var viewport_scale = screen_dimension / content_width;

  // resize viewport
  $('meta[name=viewport]').attr('content',
    'height=device-height, width=' + content_width + ',' +
    'minimum-scale=' + viewport_scale + ', maximum-scale=' + viewport_scale);
}

var supportsOrientationChange = "orientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    orientation()
}, false);

$(document).bind("pageinit",function(){
    orientation()
}).trigger('pageinit');

这次几乎所有东西都可以在我测试过的每个浏览器（Android 和 iOS）上运行。剩下的唯一问题是在 iOS 上。当您单击输入字段时，方向会神奇地改变。

于 2012-11-29T09:24:34.673 回答