自动调整网页大小以适应移动设备的全高？

Question

我一直在尝试让我的网页自动调整大小以适应移动设备的高度。截图左边是没有缩放的版本，右边是我用“initial-scale”属性手动缩放页面：

我是这样实现截图右侧的：

<meta name="viewport" content="height=device-height, initial-scale=0.82">

我想知道是否有技巧（html、css、js？）可以自动调整页面显示大小而无需手动设置“初始比例”？非常感谢任何提示，谢谢！

Answer 1

您可以使用 javascript 更改初始比例，但页面不会重新呈现更改。在这种情况下，我会尝试 CSS 比例属性.

为包含内容的主容器提供一些 ID。（例如 id="content"）
添加脚本文件（比如说resize.js）

const content = document.querySelector('#content');
content.style.transformOrigin = 'top left';

window.addEventListener('resize', recalculateScale);

function recalculateScale() {
  const windowHeight = window.innerHeight;
  content.style.transform = `scale(${windowHeight / content.offsetHeight})`;
}

recalculateScale();

将脚本标签添加到您的 html

<script src="resize.js"></script>

此解决方案所做的是添加侦听器以调整事件大小。如果您更改 window 尺寸，调整大小将运行.

获取content元素，设置css（也可以设置在document head的<style></style>标签之间），然后添加监听器。在调整大小事件中，函数 recalculateScale 运行s.

这将获得 window 高度并设置 CSS 变换属性以将内容缩放到某个比例。我尝试了 windowHeight/content.offsetHeight，即 window 高度除以内容容器高度。您可以稍微玩一下公式以获得最佳结果。

自动调整网页大小以适应移动设备的全高？

Auto-resizing web page to fit full height on mobile?

html

javascript

css

mobile

viewport