自动调整网页大小以适应移动设备的全部高度？
彼得·迈耶
我一直试图让我的网页自动调整大小以适合移动设备的高度。屏幕截图的左侧显示了没有缩放比例的版本，而在右侧，我使用了“ initial-scale”属性来手动缩放页面：
这就是我实现屏幕截图右侧的方式：
<meta name="viewport" content="height=device-height, initial-scale=0.82">
我想知道是否有一个技巧（html，css，js？）来自动调整页面显示的大小，而无需手动设置“初始比例”？非常感谢任何提示，谢谢！
HonzaKuchař
您可以使用javascript更改initital-scale，但该页面不会重新显示更改。在这种情况下，我将尝试使用CSS scale属性。
- 为具有内容的主容器提供一些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>
该解决方案的作用是将侦听器添加到调整大小事件。如果更改窗口尺寸，将运行调整大小。
它获取内容元素，设置css（也可以<style></style>在文档头中的标签之间设置它），然后添加侦听器。在调整大小事件时，函数recalculateScale运行。
这将获得window高度并设置CSS变换属性以按比例缩放内容。我尝试了windowHeight/content.offsetHeight，这是窗口高度除以内容容器高度。您可以对公式进行一些调整以获得最佳结果。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
引导程序自动调整视频大小以适应屏幕大小
- 2
如何使字体大小自动适应移动版本
- 3
如何在移动设备上自动隐藏网页的轮播？
- 4
自动调整文本框大小以适应可用空间
- 5
防止调整移动设备回发的大小
- 6
如何使自动调整大小（高度）的UITableViewCell？
- 7
UiTableViewCell为不同设备自动调整大小
- 8
使用javascript调整和调整移动设备大小的准则
- 9
在移动设备上调整Mathjax的大小
- 10
在移动设备上调整SVG的大小
- 11
网页大小调整自动调整HTML简单
- 12
自动调整按钮大小以适应屏幕尺寸？
- 13
Android：为每个设备自动调整大小
- 14
自动调整背景图像大小以适应所有设备和方向
- 15
找不到自动调整iframe大小以适应其内容的方法
- 16
自适应网页设计（在调整大小时更改布局）
- 17
调整div宽度的大小以自动适应段落的宽度
- 18
根据屏幕分辨率自动调整网页大小
- 19
根据设备的宽度和高度调整图像大小
- 20
自适应网页-设计高度
- 21
自动布局调整以适应不同的浏览器窗口大小
- 22
根据设备自动调整大小
- 23
自动调整背景图像大小以适合较小的窗口和移动设备-HTML / CSS
- 24
我的网页无法针对小型设备正确调整大小
- 25
网页无法在移动浏览器上调整大小
- 26
限制自动调整大小遮罩高度拉伸
- 27
在移动设备上调整图像大小
- 28
我正在尝试使用 css 调整图像大小以适应移动设备，但它不起作用
- 29
为移动设备调整页脚大小
我来说两句