文章/答案/技术大牛

发布

社区首页 >问答首页 >Blazor服务器端android/iOS视图问题

问Blazor服务器端android/iOS视图问题
EN

Stack Overflow用户

提问于 2022-03-30 07:13:17

回答 2查看 71关注 0票数 0

我有Blazor服务器端的应用程序，我现在正在android和ios手机上测试它。

我已经注意到，该网站的标题并没有显示在我的桌面上。

以下是我的桌面标题的外观：

下面是我的android和ios设备上的外观：

以下是我的MainLayout.razor代码：

@inherits LayoutComponentBase


<div class="main">

    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        
        
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSU"
                 width="120"
                 height="95" />
        

            <div class="container">

                <a class="navbar-brand" asp-area="" href=".">EEXI</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" href="/About">About</a>
                        </li>
                    </ul>
                </div>
                <div class="dropdown-menu-left">
                    <a href="/Admin"><img src="https://i.imgur.com/yBzRXgu.png" title="Admin" /></a>
                </div>
            </div>

    </nav>

    <div class="content px-4">
        @Body
    </div>
    <footer class="no-print">
        <div class="no-print">
            <hr />
            <p>© 2022 - Dromon Bureau of Shipping - <a href="https://www.dromon.com/privacy-policy-2/" target="_blank">Privacy Policy</a></p>
        </div>
    </footer>
</div>

这是我的Host.cshtml

  <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0">

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EEXI Calculator</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script src="~/JS/JavaScript1.js"></script>
    <script src="~/jquery/jquery.js"></script>
    <script>
        // When the user clicks the button, the page scrolls to the top
        function OnScrollEvent() {
            document.documentElement.scrollheight = 0;
        }

    </script>
</body>
</html>

我在这里注意到，我的头上有一个菜单，我不知道它是从哪里来的。那个按钮不见了。一般的观点是不符合规则的。

问题：

我能让我的视图与桌面视图相同吗？
如果没有，我能做些什么来使它发挥作用？
我已经注意到，如果我打开桌面视图从我的安多芬(iOS不切换)，一切看起来都正常。有什么我可以做的，以迫使我的应用程序运行在桌面视图的所有时间？(最理想的解决方案，因为它也解决了其他次要问题)

css

twitter-bootstrap

blazor

blazor-server-side

回答 2

Stack Overflow用户

发布于 2022-03-30 09:16:43

试着不使用navbar，只使用nav

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="p-3 bg-dark text-white">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
         <!--Replace with your logo-->
          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
          <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
          <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
          <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
          <li><a href="#" class="nav-link px-2 text-white">About</a></li>
        </ul>

        <div class="text-end">
          <button type="button" class="btn btn-outline-light me-2">Login</button>
          <button type="button" class="btn btn-warning">Sign-up</button>
        </div>
      </div>
    </div>
  </header>
 </div>
 </body>
 </html>

参见引导文档

票数 1

Stack Overflow用户

发布于 2022-03-30 09:19:42

关于问题3：

我已经删除了这个：

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

从Host.cshtml和应用程序打开，只作为桌面视图。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71672967

复制

相似问题

问Blazor服务器端android/iOS视图问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blazor服务器端android/iOS视图问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blazor服务器端android/iOS视图问题
EN