视口单元在 Cordova 移动应用程序中不起作用

Posted 2023-03-06

【中文标题】视口单元在 Cordova 移动应用程序中不起作用

【英文标题】：Viewport Units not working in Cordova Mobile App

【发布时间】：2014-08-16 21:39:05

【问题描述】：

我正在尝试为我的应用程序提供响应式网页设计，以便它适应多个屏幕。因此，我在我的 css 中使用了视口单位（vw 和 vh）来处理从字体大小到边距的每一件事。但是cordova webview 不支持视口单元。我被困在这里了。

有没有办法让 vh 和 vw 单元在 cordova webview 上工作？ 要么 有没有其他方法可以为我的应用程序获得响应式网页设计，以便我可以跨多个屏幕（android）发布它。

提前致谢。

【参考方案1】：

我会使用 em 而不是视口单位，我会在 html 标签中添加一些媒体查询来操作字体大小。 单位 'em' 是相对的，所以如果我在 html 上更改字体大小，它将在其子项上缩放字体大小

【参考方案2】：

据我了解，一些早期版本的 Android 和 ios 不支持视口单元 http://caniuse.com/viewport-units

【参考方案3】：

我得到了 js 解决方法，它在 Cordova 应用程序中运行良好

代码：

var w=$(window).width()/100; var h=$(window).height()/100; function vw( val ) return w*val+'px'; function vh( val ) return h*val+'px'; $('.header p').css( fontSize: vw(4), marginTop: vh(2) );

是不是很简单？

【讨论】：

它解决了视口问题，但是如何让 UI 组件重新定位以适应不同的屏幕分辨率呢？我现在也有类似的问题。

@Franva，您可以使用媒体查询和其他一些 js 变通方法（例如检测屏幕分辨率）将 UI 组件定位在不同尺寸（不同屏幕分辨率）的屏幕中。

嗨，谢谢您的回复。但是该网站已经使用了引导 css。当我直接在移动浏览器中打开网站时它可以工作，但在我使用 Cordova 将其包装为混合应用程序并在 Android 移动设备上运行后就无法工作。你有什么想法？谢谢

【参考方案4】：

如果你尝试过：

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

然后试试这个：

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

【讨论】：

试试这个

它也不起作用我最初使用的是 我正在我的手机中测试这个，它是 android 4.0 ICS。手机有什么关系吗？