用户访问页面时如何动态缩放整个 ASP.Net MVC 应用程序

Posted 2023-05-08

【中文标题】用户访问页面时如何动态缩放整个 ASP.Net MVC 应用程序

【英文标题】：How to dynamically zoom the entire ASP.Net MVC app when user access the page

【发布时间】：2020-05-09 09:51:00

【问题描述】：

我正在开发一个用 ASP.Net MVC 开发的非常成熟的 web 应用程序......而且该应用程序被老年人（60 岁以上）使用，所以他们不断抱怨尺寸小，他们看不到好吧。

所以我尝试开始增加按钮、文本等的字体大小......但是网络应用程序非常成熟，有数千个视图和项目，其他项目依赖于引导程序，需要深入到引导程序中为了改变字体大小。

所以我想出了一个想法，当用户访问网站时，网络应用程序应该自动缩放到 150%。 我在谷歌浏览器（手动）缩放中对其进行了测试，并将其截图发送给客户，他们都同意这个尺寸。

请问如何在页面加载时在所有浏览器上自动缩放到 150%？

【参考方案1】：

在 CSS 主体上使用 zoom 样式，在 firefox 上使用 -moz-transform

body 
    zoom:150%;
    -moz-transform: scale(1.2);
    -moz-transform-origin: left top;

【讨论】：

我也建议将此作为快速解决方案，尽管 Firefox 不支持它！ caniuse.com/#feat=css-zoom

@zeropublix 好的，我为 firefox 添加了类似的 css。注意left top 以正确放大。

【参考方案2】：

看起来像这个问题的重复：How to Increase browser zoom level on page load?

CSS 中有一条zoom 规则：

body 
    zoom: 2;
    -moz-transform: scale(2); // for support in Firefox

正如其中一个答案（由 Vinod 提出）所提到的，使用 javascript 也是可行的：

<script type="text/javascript">
    function zoom() 
       document.body.style.zoom = "300%" 
    
</script>