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中运行，但不是在我的Android上的iPad和默认浏览器上。在默认的Android浏览器中，问题是当我以纵向加载页面并将平板电脑旋转90度时它再次执行该功能但仍然说他是肖像。在iPad上一切正常，但当我把它变成风景时不会再缩小。 iPad上的问题可能与iPad上禁用的调整大小功能有关，但我无法解决。

我使用innerHeight＆amp;宽度，因为某些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上。当您单击输入字段时，方向会神奇地改变。

如何在所有移动设备上正常启用网络应用？

1 个答案: