我已经开发了一个网站的慈善机构使用ASP.NET和SQL Server。这些网页是在个人电脑上开发和测试的（我现在知道了）。这些网页在移动的设备上看起来很小，大多数用户将使用手机。几年前我使用HTML，但我对CSS和“响应式设计”的想法很陌生。我读过很多关于浏览器检测、响应式设计、CSS、JavaScript、@Media queries等的文章：
我尝试了几种不同的方法，但没有一种对我有效。
下面是其中一个页面的HTML和屏幕截图，显示了当前和所需的（简单放大）外观。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="logon.aspx.cs" Inherits="mysite.logon" %>
<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login</title>
<style type="text/css">
html, body {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
.blank_row
{
height: 5px;
}
</style>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
</head>
<body>
<form id="login" runat="server">
<div>
<table width="100%">
<tr>
<td colspan="4">
<div style="margin-left: auto; margin-right: auto; text-align: center;">
<asp:Label ID="lblLogin" runat="server" Text="LOGIN" Font-Bold="true" Font-Size="XX-Large"
CssClass="StrongText"></asp:Label>
</div>
</td>
</tr>
<tr class="blank_row">
<td colspan="4"></td>
</tr>
<tr>
<td width="25%"></td>
<td width="25%">
<div style="text-align:right">
<asp:Label Text="Email: " runat="server"/>
</div>
</td>
<td width="25%">
<asp:TextBox ID="txtEmail" runat="server" />
</td>
<td width="25%"></td>
</tr>
<tr>
<td width="25%"></td>
<td width="25%">
<div style="text-align:right">
<asp:Label Text="Password: " runat="server" />
</div>
</td>
<td width="25%">
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"/>
</td>
<td width="25%"></td>
</tr>
<tr>
<td colspan="4">
<div style="margin-left: auto; margin-right: auto; text-align: center;">
<asp:Button Text="Login" ID="btnLogin" runat="server" OnClick="btnLogin_Click"/>
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div style="margin-left: auto; margin-right: auto; text-align: center;">
<asp:Label Text="" ID="lblErrorMessage" runat="server" ForeColor="Red"/>
</div>
</td>
</tr>
<tr class="blank_row">
<td colspan="4"></td>
</tr>
<tr>
<td colspan="4">
<div style="margin-left: auto; margin-right: auto; text-align: center;">
<asp:HyperLink ID="ForgotPassword" runat="server" Text="Forgot password" NavigateUrl="~/ForgotPassword.aspx"></asp:HyperLink>
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div style="margin-left: auto; margin-right: auto; text-align: center;">
<asp:HyperLink ID="CreateAccount" runat="server" Text="Create account" NavigateUrl="~/Account.aspx"></asp:HyperLink>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
1条答案
按热度按时间5tmbdcev1#
尝试将您的viewport Meta标记更改为：
<meta name="viewport" content="width=device-width, initial-scale=1.0">Further reading