html - 将网站扩展到移动设备

Question

我有一个 Web 应用程序，其中响应式布局不适用于移动设备，因此我尝试稍微调整视口(viewport)缩放比例但没有成功。

页面大小为 1280x720，因此在小屏幕上应该缩小，在大屏幕上放大:

var scale = $(window).width() / 1280;

$('head').append('<meta name="viewport" content="width=device-width, height=device-height, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

我只针对宽度尝试过这个，但结果不是我想要的，我做错了什么吗？

Answer 1

我不确定你到底想达到什么目的，但是使用以下 html

<meta name="viewport" content="width=1280, initial-scale=1">

和下面的JS

var siteWidth = 1280;
var scale = screen.width /siteWidth;

document.querySelector('meta[name="viewport"]').setAttribute('content', 'width='+siteWidth+', initial-scale='+scale+'');

您应该能够在移动设备上显示初始放大或缩小的页面。您必须检查设备是否为纵向。对于横向，您需要使用 screen.height 而不是 screen.width