c# - body 最大高度；纵横比；飞涨

Question

我写了一个漂亮的响应式 c#-MVC web 应用程序，专为笔记本电脑设计(编译和 alpha 测试环境)；但是，部署后，它在 Android 设备上显示不正确。当设备纵向翻转时，文本很小。当我有希望顿悟的时候，我花了大约一天的时间来为 Android 设计一个半美学的垂直响应设计。是否可以设置正文的最大高度并自动缩放页面？有没有人有这个想法的经验可以指导我？我会这样做并进行测试，但这样做需要我真正提交并恢复到以前的版本，然后从 Xamarin 重新迁移到 VS(如果可能的话，这是最简单的方法，否则这是一项巨大的时间投资)。目标设备是三星 S4，因此我可以使用它支持的任何视口(viewport)或缩放解决方案。

注意:我会保留这个问题，以防有人提出另一个答案，因为这个解决方案可能会帮助很多开发人员。对我有用的解决方案是:

在 _Layout.cshtml 页面中放置一个 Viewport 元标记:

<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

我相信您的元标记中缺少宽度属性。

<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
    }
}