通过智能手机浏览器(ASP.net Core MVC 3.1)查看时,剪切网页的标题

瓦尔加斯

在ASP.net Core MVC 3.1堆栈上创建了一个Web应用程序。从手机以360 x 740的分辨率查看时,会裁剪网页(在标题和表格中)。从平板电脑或PC查看时,一切都很好。我试图同时更改_Layout文件和View文件。但没有积极作用。

没关系,在这里:

从“头部”及以下的移动版观看时:

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>   
   
    <link rel="stylesheet" asp-href-include="lib/bootstrap/dist/css/*.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/fontawesome.min.css" />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="~/js/a076d05399.js"></script>
</head>

<body>
    <!-- Sidebar -->
    <div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left w3-indigo" style="width:200px;" id="mySidebar">
        <button class="w3-bar-item w3-button w3-large w3-hide-large w3-hover-white" onclick="w3_close()">&times;</button>

        <center><h1>HOMIE</h1></center>
        <hr>

        <a asp-area="" asp-controller="Home" asp-action="Index" class="w3-bar-item w3-button w3-hover-white">
            <i class="fa fa-fw fa-lg fa-home"></i>&nbsp; Домой
        </a>

        <button class="w3-button w3-block w3-left-align w3-hover-white" onclick="myAccSeriesFunc()">
            <i class="fa fa-film fa-fw fa-lg"></i>&nbsp; Сериалы <i class="fa fa-caret-down"></i>
        </button>
        <div id="seriesAcc" class="w3-hide w3-light-gray w3-card">
            <a asp-area="Series" asp-controller="Home" asp-action="Index" class="w3-bar-item w3-button w3-hover-white">
                <i class="fa fa-video fa-fw" aria-hidden="true"></i>&nbsp; Просмотр
            </a>

            <a asp-area="Series" asp-controller="Home" asp-action="ArchMovies" class="w3-bar-item w3-button w3-hover-white">
                <i class="fa fa-fast-backward fa-fw" aria-hidden="true"></i>&nbsp; Архив
            </a>
        </div>

        <a asp-area="Cigars" asp-controller="Home" asp-action="Index" class="w3-bar-item w3-button w3-hover-white">
            <i class="fas fa-joint fa-lg"></i>&nbsp; Сигары
        </a>        

        <a method="post" asp-area="Identity" asp-controller="Home" asp-action="Index" class="w3-bar-item w3-button w3-hover-white"><i class="fas fa-sign-in-alt fa-lg"></i>&nbsp; Выход</a>
    </div>

    <!-- Page Content -->
    <div class="w3-main" style="margin-left:200px">

        <div class="w3-indigo">
            <button class="w3-button w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</button>
            <div class="w3-container w3-indigo">
                <h1>@ViewBag.HeaderTitle</h1>
            </div>
        </div>
        <p></p>

        <div class="w3-container">
            @RenderBody()
        </div>

        <script>    

            function myAccSeriesFunc() {
                var x = document.getElementById("seriesAcc");
                if (x.className.indexOf("w3-show") == -1) {
                x.className += " w3-show";
                x.previousElementSibling.className += " w3-white";
                } else {
                x.className = x.className.replace(" w3-show", "");
                x.previousElementSibling.className =
                    x.previousElementSibling.className.replace(" w3-white", "");
                }                
            }

            function myAccAdminFunc() {
                var y = document.getElementById("adminAcc");
                if (y.className.indexOf("w3-show") == -1) {
                y.className += " w3-show";
                y.previousElementSibling.className += " w3-white";
                } else {
                y.className = y.className.replace(" w3-show", "");
                y.previousElementSibling.className =
                    y.previousElementSibling.className.replace(" w3-white", "");
                }
            }

            function w3_open() {
                document.getElementById("mySidebar").style.display = "block";

            }

            function w3_close() {
                document.getElementById("mySidebar").style.display = "none";
            }
        </script>
    </div>

   

</body>
</html>

Index.cshtml:

@using Homie.Models
@model IndexViewModel

@addTagHelper *, Homie

@{
    ViewBag.Title = "Список выкуренных сигар";
    ViewBag.HeaderTitle = "Сигары - - - - [ История ]";
}

<style>
    .table-striped > tbody > tr:nth-child(odd) > td,
    .table-striped > tbody > tr:nth-child(odd) > th {
        background-color: sandybrown;
    }    
</style>

<a asp-action="Create" asp-controller="Home" asp-area="Cigars"
   class="btn btn-primary"
   role="button">Добавить</a>
<p></p>

<form method="get">
    <div class="form-inline">
        <label>Название: </label>
        <input name="name" value="@Model.FilterViewModel.SelectedName" class="form-control" />

        <label>Формат: </label>        
        <select name="format" asp-items="Model.FilterViewModel.Formats" class="form-control"></select>        

        <input type="submit" value="Фильтр" class="btn btn-outline-dark" />
    </div>
</form>
<p></p>

<div>
    <label>Количество сигар: @Model.PageViewModel.CountPages</label>
</div>

<table class="table table-bordered table-striped table-sm">
    <tr>
        <th>
            <a asp-action="Index"
               asp-route-sortOrder="@(Model.SortViewModel.NameSort)"
               asp-route-name="@(Model.FilterViewModel.SelectedName)"
               asp-route-format="@(Model.FilterViewModel.SelectedFormat)">Название</a>
        </th>
        <th>Страна</th>
        <th>Цена</th>
        <th>Рейтинг</th>
        <th>
            <a asp-action="Index" asp-route-sortOrder="@(Model.SortViewModel.FormatSort)"
               asp-route-name="@(Model.FilterViewModel.SelectedName)"
               asp-route-format="@(Model.FilterViewModel.SelectedFormat)">Формат</a>
        </th>
        <th></th>
    </tr>
    @foreach (var p in Model.Cigars)
    {
        <tr>
            <td>@p.Name</td>
            <td>@p.Country</td>
            <td>@p.Price</td>
            <td>@p.Rating</td>
            <td>@p.Shape</td>
            <td>

                <a asp-action="Edit" asp-controller="Home" asp-route-id="@p.Id" class="btn btn-success"
                   role="button">Изменить</a>
                <a asp-action="Delete" asp-controller="Home" asp-route-id="@p.Id" class="btn btn-danger"
                   role="button">Удалить</a>
            </td>
        </tr>

    }
</table>
<p></p>
<page-link page-model="Model.PageViewModel" page-action="Index"
           page-url-name="@(Model.FilterViewModel.SelectedName)"
           page-url-company="@(Model.FilterViewModel.SelectedFormat)"
           page-url-sortorder="@(Model.SortViewModel.Current)"></page-link>

我是桑皮卡

本质<table>是它们是固定宽度的。您需要使表超过父级宽度时使它具有滚动条,或者找到某种方法来折叠移动设备上的列(DataTables.js开箱即用了一些不错的工具)。下面是使表格滚动的示例:

https://jsfiddle.net/Lv3sw20g/6/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

返回浏览器时,PHP会话在智能手机上丢失

来自分类Dev

在智能手机上关闭Chrome浏览器时,会话Cookie不会过期

来自分类Dev

如何通过Ubuntu扎根Lenovo k3 Note智能手机

来自分类Dev

ASP.NET Core 3 MVC:对象列表的模型绑定

来自分类Dev

在Identity Asp.net core 3 MVC中创建服务IUserStore时出错

来自分类Dev

在浏览器asp.net mvc 3中按“后退”时,删除TempData值

来自分类Dev

.net core 3,MVC,使用“端点路由”时不支持使用“ UseMvcWithDefaultRoute”配置MVC

来自分类Dev

查看ASP.NET MVC与ASP.NET Core MVC之间的目录编译时间差

来自分类Dev

发出具有不同类型的3参数Ajax请求时遇到问题-Asp.net Core MVC

来自分类Dev

使用AddSignInManager时的ASP.NET Core MVC异常

来自分类Dev

智能手机模式下的网页菜单侵入他人

来自分类Dev

如何让我的网页完美适配任何智能手机?

来自分类Dev

从网页使用智能手机摄像头扫描条形码

来自分类Dev

如何查看智能手机等嵌入式设备的启动图?

来自分类Dev

ASP.NET Core 3 MVC端点路由和按路由进行本地化

来自分类Dev

AuthorizeAttribute在ASP.NET Core 3 MVC中不执行任何操作

来自分类Dev

ASP.NET Core 3 MVC:如果找不到所需的视图,则提供默认视图

来自分类Dev

在asp.net core 3 MVC中包含列表属性的模型的表单

来自分类Dev

ASP.NET Core MVC视图附件

来自分类Dev

Ionic 1 公共 api 保护只能由安卓智能手机使用

来自分类Dev

.NET Core 3 MVC中的自定义路由

来自分类Dev

在推送到S3之前,是否有更清洁的方法来旋转通过烧瓶上传的智能手机图像?

来自分类Dev

在推送到S3之前,是否有更清洁的方法来旋转通过烧瓶上传的智能手机图像?

来自分类Dev

通过智能手机 OnePlus 3T 在网站上的字体大小和 img 高度太大

来自分类Dev

ASP.NET MVC 3-仅在某些浏览器上重定向循环

来自分类Dev

ASP.NET MVC 3-仅在某些浏览器上重定向循环

来自分类Dev

ASP.NET Core MVC 和 EF Core 1.1

来自分类Dev

3G加密狗是否比内置智能手机3G芯片快?

来自分类Dev

在智能手机上查看网页时强制元素移动

Related 相关文章

  1. 1

    返回浏览器时,PHP会话在智能手机上丢失

  2. 2

    在智能手机上关闭Chrome浏览器时,会话Cookie不会过期

  3. 3

    如何通过Ubuntu扎根Lenovo k3 Note智能手机

  4. 4

    ASP.NET Core 3 MVC:对象列表的模型绑定

  5. 5

    在Identity Asp.net core 3 MVC中创建服务IUserStore时出错

  6. 6

    在浏览器asp.net mvc 3中按“后退”时,删除TempData值

  7. 7

    .net core 3,MVC,使用“端点路由”时不支持使用“ UseMvcWithDefaultRoute”配置MVC

  8. 8

    查看ASP.NET MVC与ASP.NET Core MVC之间的目录编译时间差

  9. 9

    发出具有不同类型的3参数Ajax请求时遇到问题-Asp.net Core MVC

  10. 10

    使用AddSignInManager时的ASP.NET Core MVC异常

  11. 11

    智能手机模式下的网页菜单侵入他人

  12. 12

    如何让我的网页完美适配任何智能手机?

  13. 13

    从网页使用智能手机摄像头扫描条形码

  14. 14

    如何查看智能手机等嵌入式设备的启动图?

  15. 15

    ASP.NET Core 3 MVC端点路由和按路由进行本地化

  16. 16

    AuthorizeAttribute在ASP.NET Core 3 MVC中不执行任何操作

  17. 17

    ASP.NET Core 3 MVC:如果找不到所需的视图,则提供默认视图

  18. 18

    在asp.net core 3 MVC中包含列表属性的模型的表单

  19. 19

    ASP.NET Core MVC视图附件

  20. 20

    Ionic 1 公共 api 保护只能由安卓智能手机使用

  21. 21

    .NET Core 3 MVC中的自定义路由

  22. 22

    在推送到S3之前,是否有更清洁的方法来旋转通过烧瓶上传的智能手机图像?

  23. 23

    在推送到S3之前,是否有更清洁的方法来旋转通过烧瓶上传的智能手机图像?

  24. 24

    通过智能手机 OnePlus 3T 在网站上的字体大小和 img 高度太大

  25. 25

    ASP.NET MVC 3-仅在某些浏览器上重定向循环

  26. 26

    ASP.NET MVC 3-仅在某些浏览器上重定向循环

  27. 27

    ASP.NET Core MVC 和 EF Core 1.1

  28. 28

    3G加密狗是否比内置智能手机3G芯片快?

  29. 29

    在智能手机上查看网页时强制元素移动

热门标签

归档