html - 元名称 ="viewport"- 一起禁用旋转、缩放和滑动

Question

我们正在开发一个应仅 应在 iOS 上运行的自定义网络应用程序。该应用程序部署为网站，然后从 Safari 添加“主页图标”，因此它的行为类似于应用程序。

我们将应用行为定义为

• 没有缩放(已经工作)
• 无屏幕旋转
• 无垂直滑动

正文是 640x1096 像素。这是 iPhone 5s 的分辨率(不包括顶部的 iOS 栏)。

width=device-width, initial-scale=.5, user-scalable=no

出于某种原因，initial-scale 必须设置为 .5 而不是 1，这样网站才能完全适应iPhone 的空间。 为什么？

它已经不可缩放，但您仍然可以旋转屏幕和垂直滑动，这有点破坏应用程序的“感觉”。实际上在 y 轴上没有什么可以滑动的，所以我们不妨去掉它。

Answer 1

可以使用 TouchSwipe 完全禁用滑动.然后您可以触摸任何您想要的地方，网络应用程序不会在任何地方滑动。

$('html').swipe
({
    fingers: 'all',
    swipe: function() { }
});

并且可以像这样禁用旋转:

$(function()
{
    window.onorientationchange = OrientationChanged;
    window.setTimeout(OrientationChanged, 0);
}
function OrientationChanged(e)
{
    $('body').css('-webkit-transform', window.orientation % 180 == 0 ? '' : 'rotate(-90deg)');
}