科尔多瓦 - 响应式网页设计

Question

我的 HTML 应用在任何尺寸的移动设备和平板电脑或 PC 上都具有几乎相同的布局。 甚至字体也可以根据屏幕大小进行调整。当我在 chrome 浏览器中打开我的应用程序时，我还可以放大和缩小它

但是，当我使用 cordova 将此 html 应用程序转换为 android 应用程序时，我的 android 应用程序并没有表现出同样的灵活性。 字体不适合屏幕，我无法放大/缩小我的 Android 应用程序。此外，应用布局确实会根据屏幕大小进行调整。

我在我的 HTML 应用程序中使用了 viewport 标签。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

我的 Cordova 资源 ;--- https://github.com/dinguluer/UiMagician/tree/master/samples/cordova/source/test
为 Android 4.3 生成的 Cordova Android 应用程序：-- https://github.com/dinguluer/UiMagician/tree/master/samples/cordova/samples/Android/4.3/Multiple_multi_houses

布局依赖的主css文件：-- https://github.com/dinguluer/UiMagician/blob/master/samples/cordova/source/test/www/css/multiFloorStyle.css

我没有遵循 Cordova 响应式网页设计标准吗？

是否必须根据视口的 vw 和 vh 变量更改 css 文件中的尺寸？
如果是，那么如何为我的静态 css 文件 multiFloorStyle.css 做呢？

请提出建议。

Answer 1

为了更好的外观和感觉，字体大小，图像使用 css 中的媒体查询然后你可以得到。

  <style>
    @media (max-width: 600px) {
    .facet_sidebar {
      font-size: 1em;
      }
     }
  </style>

对于缩放问题，请修改您的元标记，使其用户可缩放 false ，这就是它不缩放的原因 使用这个：

     <meta name="viewport" content="width=device-width; height=device-height; maximum-scale=2; initial-scale=1.0; user-scalable=yes"/>