android - cordova - 响应式网页设计

Question

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

但是当我使用 cordova 将这个 html 应用程序转换为 android 应用程序时，我的 android 应用程序没有显示出相同的灵 active 。字体不适合屏幕，我无法放大/缩小我的 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 响应式网页设计标准吗？

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

请提出建议。

Answer 1

为了更好的观感，font-size，images在css中使用media query然后就可以得到。

  <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"/>