meta name= "viewport" - 禁用旋转、缩放和滑动

Question

我们正在开发一个自定义web应用程序，该应用程序应仅在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)');
}