身体最大高度 纵横比 放大

Question

我已经编写了一个用于笔记本电脑的漂亮的​​响应式c＃-MVC Web应用程序（编译和alpha测试环境）； 但是，部署后，它在Android设备上无法正确显示。 当设备纵向翻转时，文本很小。 当我有一个顿悟的时候，我已经花了大约一天的时间来破解Android的半美学垂直响应设计。 是否可以设置主体的最大高度并自动缩放页面？ 有人可以指导我吗？ 我会做并测试，但是这样做需要我真正提交并还原到以前的版本，然后从Xamarin重新迁移到VS（如果可能的话，这是最简单的方法，否则将花费大量时间）。 目标设备是Samsung S4，因此我可以使用它支持的任何视口或缩放解决方案。

注意：如果有人想出另一个答案，我将保留此问题，因为此解决方案可能会帮助很多开发人员。 对我有用的解决方案是：

将视口元标记放置在_Layout.cshtml页面中：

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

接下来，在javascript文件中放（这些应结合使用，但出于描述目的，我一次将它们展示一次）：

document.getElementById("viewport").setAttribute("content", "height=600");
document.getElementById("viewport").setAttribute("content", "device-width=800");

根据需要调整参数。

Answer 1

我相信您在元标记中缺少width属性。

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

要禁用缩放（根据应用程序可能是必要的）：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

除此之外，如何设置字体大小？ 仅在body标签上设置像素值，而不设置该值，浏览器将使用设备默认值，对于台式机通常为〜16px。

设置基本字体粗细后，利用EM调整其他元素相对于正文字体大小的大小。 这使得通过媒体查询为较小的屏幕更改基本字体变得非常容易。 如：

@media (max-width: 400px) {
    body {
       font-size: 14px
    }
}