如何使 Web 应用程序在所有移动设备上正常打开？答案

【问题标题】：How can I make a web app turn properly on all mobile devices?如何使 Web 应用程序在所有移动设备上正常打开？
【发布时间】：2012-11-16 10:31:12
【问题描述】：

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

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上禁用的resize功能有关，但我无法解决。

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

【问题讨论】：

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

标签： android jquery ios web-applications orientation

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

【讨论】：