Ionic 导航栏:标题未在 Android 设备上居中

2024-01-27

我对 Ionic 很陌生,但我已经喜欢它了。我想用nav-bar所以我实现了以下index.html:

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <!-- Ionic -->
    <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.css">
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- myApp -->
    <link rel="stylesheet" type="text/css" href="css/general.css">
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/factory.js"></script>
    <script type="text/javascript" src="js/controller.js"></script>
</head>

<body>
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>
</body>

</html>

在我的 app.js 中,我配置路径:

var myApp = angular.module('myApp', ['ionic']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url: '/',
        templateUrl: 'views/home.html'
    }).state('prints', {
        url: '/prints',
        templateUrl: 'views/photo_prints.html'
    }).state('box', {
        url: '/box',
        templateUrl: 'views/photo_box.html'
    });

    $urlRouterProvider.otherwise("/");
});

还有一个示例页面:

<ion-view view-title="Home">
    <ion-content ng-controller="HomeController">
        <a href="#/prints">Prints</a></br></br>
        <a href="#/box">Box</a></br></br>
    </ion-content>
</ion-view>

当我在电脑上的谷歌浏览器中测试所有内容时,一切看起来都应该如此。标题居中。

当我现在在我的 Android 设备上测试它时(据我所知,它也应该使用 google chrome),我得到以下结果:

正如您所看到的,标题未居中。我该如何解决这个问题? 不幸的是我没有其他设备来测试它。


按照设计,Android 标题是左对齐的。我相信改变这种行为的正确方法是在你的角度中使用 $ionicConfigProvider.config主要角度模块的方法。 该提供程序有一个属性 navBar.alignTitle(value),其中“值”可以是平台(默认)、左、右或中心。这在文档中有描述here http://ionicframework.com/docs/api/provider/%24ionicConfigProvider/

例如

var myApp = angular.module('reallyCoolApp', ['ionic']);

myApp.config(function($ionicConfigProvider) {

  // note that you can also chain configs
  $ionicConfigProvider.navBar.alignTitle('center');
});

我认为这是覆盖此行为的正确方法。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ionic 导航栏:标题未在 Android 设备上居中 的相关文章

随机推荐

  • Git 克隆 - 未找到存储库

    git clone
  • 无法对 unordered_set 进行排序

    我有一个类的 unordered setActiveStatusEffect该集合声明如下 boost unordered set
  • Ripple 的颜色应该是什么,colorPrimary 或 colorAccent? (材料设计)

    我有读书材料设计指南 http www google com design spec material design introduction html但我不知道如果波纹不是黑色 带有阿尔法 它应该是什么颜色 例如 我有一个 colorPr
  • Java Socket OutputStream 未刷新

    我正在用java编写一个基于套接字的服务器 客户端连接到它 网络浏览器 服务器发回一个简单的 html 代码并设置 cookie 以在客户端下次再次连接时进行识别 我正在使用 PrintStream 写入套接字 但刷新不起作用 我可以刷新的
  • 仅显示日期 MVC

    我有这个model using System using System Collections Generic using System Linq using System Web using System Web Mvc using Sy
  • WMI、过去的负 CPU 使用率值和 Timestamp_Sys100NS

    我正在使用 WMI 和 NET 来监控一些机器System Management东西 我正在使用的查询是这样的 SELECT Timestamp Sys100NS PercentProcessorTime FROM Win32 PerfRa
  • 根据一天中的时间更改背景(使用 JavaScript)

    好的 我有两个不同的背景 jpg 我想根据一天中的具体时间将它们用作背景 我想要早上 7 点到晚上 8 点的阳光背景和晚上 8 点到早上 7 点的夜间背景 我正在处理一个远程 html 文件 并且我将背景和图形存储在与实际 html 文件不
  • 如何将我的分叉存储库的部分更改作为补丁提交?

    我从 GitHub 分叉了一个存储库并进行了一系列更改 然后我发现我在一个文件中的修改之一可以是原始存储库的某个问题的补丁 但作者不想合并我的其他修改 所以我不想直接发送拉取请求 我认为再次分叉并修改该文件以制作补丁 然后发送拉取请求似乎不
  • Twitter 引导表分页

    我目前正在引导程序中处理表 它工作得很好 目前我遇到分页问题 我试图将数据动态推入表中 一旦数据变得太大 表就会向下扩展 如何对表进行分页 如果你想在 Bootstrap 中使用 Datatables 你需要初始化它 Table initi
  • 将 .jks 转换为 p12

    我怎样才能转换 jks文件到p12 jks是一个java密钥存储文件 那么我如何将它转换为p12 format 将 JKS 文件转换为 PKCS12 格式 Java 1 6 x 及更高版本 keytool importkeystore sr
  • 如何最好地从截断正态分布中获取样本?

    我已经做了一些搜索 但我似乎无法找到从截断正态分布中采样的合理方法 没有截断我正在做 samples np random normal loc x scale d for x d in zip X D X and D是浮动列表 目前我正在实
  • WIX:多个功能/文件夹的重复 ID 问题

    我是 Wix 的新手 正在创建一个多功能 Wix 项目 我们的产品有 4 个模块 每个模块都必须作为一项功能包含在 Windows 安装程序中 但所有功能都共享相同的文件夹结构 我正在使用命令行来构建我的 Wix 项目 将每个模块收集到不同
  • 使用 JsonWebToken 时遇到问题; JsonWebToken 错误:必须提供 JWT

    我正在使用 Vue 构建我的第一个 SPA 项目 我决定使用 NodeJS 作为后端 但是 我在使用 JsonWebToken 构建登录功能时遇到了麻烦 我写了一些代码来查看 JWT 如何工作 当我尝试查看 JWT 如何验证时 服务器给了我
  • 如何将全局自定义样式应用于android.support.design.widget.TextInputEditText?

    我有我的AppTheme定义于style xml我在其中为所有应用程序全局应用自定义样式TextView EditText Button etc 现在我想做同样的事android support design widget TextInpu
  • Visual Studio 2019 Xamarin.Forms 项目中未命中断点

    我正在开发 Xamarin Forms 添加 我不知道昨天是否在 Visual Studio 2019 上更新 16 5 1 是原因 但是当我处于调试模式时 在 Android 项目上与我的设备连接时断点不会命中 有趣的是我的应用程序运行正
  • Bootstrap colorpicker 基本示例不起作用

    我想为 bootstrap 使用颜色选择器插件 https farbelous io bootstrap colorpicker index html https farbelous io bootstrap colorpicker ind
  • 迭代c中的结构体

    我正在编写一个与此代码类似的单元测试 并且我正在尝试在设置值时测试它们 以便我知道发生了什么 当我运行以下代码时 我不明白为什么 ptr 值没有设置为 1 相反 当我运行它时 它给出的输出为 10 64 0 0 任何解释或建议将不胜感激 i
  • VBS 中的 MSGbox 根据变量值进行更新

    只是想知道我如何拥有一个 MSgbox 来显示不断变化的变量值 基本上 一个数字每次循环时都会添加一个 我想在不必打开一百万个窗口的 MSGbox 中显示它 解决方法是使用PopUp Set objShell WScript CreateO
  • 如何将值查询集的值追加到数组?

    我的观点 py from django db models import Count def test1 request states Loksabha objects values state distinct state terms L
  • Ionic 导航栏:标题未在 Android 设备上居中

    我对 Ionic 很陌生 但我已经喜欢它了 我想用nav bar所以我实现了以下index html