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

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

这里没关系：

从"头部"及以下的移动切口查看时：

_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/

相关内容

最新更新

热门标签：