android - 如何使网络应用程序在所有移动设备上正常打开？

Question

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

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 度。

Answer 1

在 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 上。当您单击输入字段时，方向会神奇地改变。