网页在移动设备上显示较小-解网

问：

我使用 ASP.NET 和 SQL Server 为慈善机构开发了一个网站。这些网页是在 PC 上开发和测试的（我现在知道了。这些页面在移动设备上看起来很小，大多数用户都在手机上。我几年前使用过 HTML，但对 CSS 和“响应式设计”的想法不熟悉。我读过很多关于浏览器检测、响应式设计、CSS、Javascript、@Media查询等的文章：

我尝试了几种不同的方法，但没有一种对我有用。

下面是其中一个页面的 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>

https://imgtr.ee/image/MobileSizing.2CUxv

HTML CSS asp.net

以下是我尝试过的一些事情：<learn.microsoft.com/en-us/aspnet/whitepapers/......> <w3schools.com/cssref/css3_pr_mediaquery.php> <developer.mozilla.org/en-US/docs/Web/CSS/@media> <geeksforgeeks.org/......> <devicedetection.com> <freecodecamp.org/news/html-page-width-height> <dev.to/ozanbolel/......>

0赞 Netferret 9/11/2023

将“.image-viewer-container img”上的“max-width”更改为“min-width”，并从图像中删除高度css。这应该让你接近你需要的东西。

答：

0赞 Brett Donald 9/11/2023 #1

尝试将视口 meta 标记更改为：

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

网页在移动设备上显示较小

Webpage displays small on mobile device

评论