locked
Asp.net, C#, WebSite, Autoscale works on my Google Pixel 3 Phone but the page looks tiny on other phones RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1045460610 posted

    Autoscale works and shows the page a good size on my Google Pixel 3 but the page looks tiny on other phones and also on desktop. But the page looks tiny on other phones. When you click on the page it scales up and looks a good size, but needs to display as a good size when the page shows initially. What could be the source of that?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="instructoremail.aspx.cs" Inherits="enteremail" %>
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head3" runat="server">
    <title>On Grounds</title>
    <style type="text/css">
    .auto-style1 {
    width: 660px;
    height: 18px;
    }
    .auto-style4 {
    width: 138px;
    height: 18px;
    }
    .auto-style5 {
    width: 168px;
    height: 18px;
    }
    </style>
    </head>
    <body>
    <form id="form3" runat="server">
    <h2>
    <asp:Image ID="Image1" runat="server" Height="103px" Width="216px" ImageUrl="~/headerLogo.png" />
    </h2>
    <h2>
    Instructor</h2>
    <h2>
    Enter Email Address</h2>
    <table>
    <tr>
    <td class="auto-style4">Email Address:</td>
    <td class="auto-style5">
    <asp:TextBox ID="txtRecordID" runat="server" Width="225px"></asp:TextBox>
    </td>
    <td class="auto-style1">

    </table>
    <br />
    <asp:Button ID="btnEnterEmail" runat="server" Text="Submit" OnClick="btnEnterEmail_Click" />
    <br />
    <asp:Panel ID="Panel1" runat="server" Width="333px">
    <br />
    Instructions/Notes:
    <br />
    -Enter Your Parker.edu eMail Address.</asp:Panel>
    <br />
    <asp:Label ID="Label2" runat="server" EnableViewState="False"></asp:Label>
    <br />
    </form>
    </body>
    </html>

    Friday, April 12, 2019 7:49 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    Add the following meta tag to the HTML head element.

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 12, 2019 10:19 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    Add the following meta tag to the HTML head element.

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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 12, 2019 10:19 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-893317190 posted

    Hi Tom4IT ,

    You specify absolute width and height like 660px , 10px.

    If you want responsive effect, you could try vw and vh , which means relative width and height to viewport.

    For example , if you write 50vw , its width will be 50% of viewport width.

    So  you could write your css as follows.

    <style type="text/css">
.auto-style1 {
width: 30vw;
height: 10vh;
}
.auto-style4 {
width: 10vw;
height:10vh;
}
.auto-style5 {
width: 60vw;
height: 10vh;
}
</style>

    Below is the result of desktop.

    For more information about vw and vh, please refer to https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

    You could also use bootstrap for a responsive effect. https://getbootstrap.com/docs/4.3/layout/grid/

    Best regards,

    Ackerly Xu

    Monday, April 15, 2019 3:16 AM