Question

我使用最新版Cordova的bootstrap为Android和Windows Phone 8构建应用程序。

我为我的主要顶级视图定义了一个bootstrap navbar-fixed-bottom div。

在Android设备上，导航栏将覆盖窗口底部附近的内容。要解决这个问题，我需要指定一个css样式：

body {
    padding-bottom: 70px;
}

<。>在.css文件中。

在Windows Phone 8上，导航栏似乎浮动在页面上方70个像素。

按照Cordova文档中的推荐指南，我将一个overrides.css文件添加到顶层＆＃39;合并＆＃39;两个平台的文件夹。 android一个与上面相同，但是wp8文件指定了0px的填充底部。我还将overrides.css的空白副本添加到我的顶级/ www文件夹中。应用于body的样式仅在overrides.css中定义。

然后我在我的主index.html文件中加载overrides.css。

在我的Android设备上加载代码，似乎＆＃39;合并/ android＆＃39;中的正文样式目录未应用。导航栏返回覆盖我页面的一部分，并且不允许我进一步向下滚动。

在wp8上，它仍悬浮在页面底部之上。

我已尝试在main.css文件之前和之后加载overrides.css。我还确保main.css中的任何内容都不能覆盖body属性。我还从顶级/ www文件夹中删除了空白的overrides.css文件。

如果将它放在顶级/ www overrides.css文档中，我似乎只能让body css工作。这不是我想要的，因为它应该被取代。

什么可能阻止平台特定的身体样式正确应用？

Answer 1

如果您不想处理CLI合并功能，@ thatrohit的建议也有效，但我发现了解决问题的方法。

事实证明，Cordova CLI创建的merges文件夹必须与＆＃39; / www＆＃39;以下的所有内容具有相同的文件夹结构。根文件夹。

我试图覆盖的.css文件位于＆＃39; / www / css＆＃39;。

在合并文件夹中，我错过了＆＃39; / css＆＃39;子文件夹并且有类似＆＃39; merges / Android / overrides.css＆＃39;，它应该是＆＃39; merges / Android / css / overrides.css＆＃39;。

Answer 2

您可以随时使用获取设备平台 device.platform 并根据平台，指定css。比如，如果device.platform返回Android，那么你可以应用你现有的css，或者如果它返回WinCE或Win32NT，那么你可以为Windows Phone指定另一个css。

Cordova基于平台覆盖css

2 个答案: