Android 如何在所有移动设备上正确打开web应用程序？

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

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);

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

---

我使用innerHeight&Width是因为有些Android设备将横向视为0度，有些设备将纵向视为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');

功能定位（）{
变量内容\宽度、屏幕\尺寸；
如果（window.innerHeight>window.innerWidth）{
//肖像画
$（'.ui page'）.removeClass（“pageL”）.addClass（“pageP”）；
内容宽度=400；
如果（screen.widthscreen.height）{screen\u dimension=screen.width}
else{screen\u dimension=screen.height}
}
var viewport\u scale=屏幕尺寸/内容宽度；
//调整视口大小
$（'meta[name=viewport]'）.attr（'content'，
'高度=设备高度，宽度='+内容\宽度+'，'+
“最小比例=”+视口比例+”，最大比例=”+视口比例）；
}
窗口中的var supportsororientationchange=“orientationchange”，
方向事件=支持或方向更改？“方向更改”：“调整大小”；
addEventListener（定向事件，函数（）{
方向（）
}，假）；
$（document）.bind（“pageinit”，function（）{
方向（）
}).trigger（'pageinit'）；

---

这一次，我测试的所有浏览器（Android和iOS）几乎都能正常工作。唯一剩下的问题是在iOS上。当你点击一个输入字段时，方向会神奇地改变。

你真的应该看看响应性网页设计。这是一个以更好的方式解决的问题，坦率地说，你不需要重新解决它。