记录下,Axure RP 制作固定的页面后,比如1920x1080的尺寸,在不同浏览器中可自适应的方法。在对应页面或者JS文件中添加以下代码即可:
<script type="text/javascript">
// 页面缩放
function resizePage() {
const designWidth = 1920;
const designHeight = 1080;
const scaleWidth = window.innerWidth / designWidth;
const scaleHeight = window.innerHeight / designHeight;
// 选择较小的缩放比例,保持页面比例
const scale = Math.min(scaleWidth, scaleHeight);
// 应用缩放到 body
document.body.style.transform = `scale(${scale})`;
// 让 body 居中
document.body.style.width = `${designWidth}px`;
document.body.style.height = `${designHeight}px`;
document.body.style.marginLeft = `${(window.innerWidth - designWidth * scale) / 2}px`;
document.body.style.marginTop = `${(window.innerHeight - designHeight * scale) / 2}px`;
}
// 页面加载和窗口调整时调用 resizePage
window.addEventListener('load', resizePage);
window.addEventListener('resize', resizePage);
</script>