如何根据用户屏幕的分辨率设置面板的宽度和高度

How to set width and height of a panel according to the resolution of the user screen?

本文关键字：高度 分辨率 何根 用户 屏幕 设置      更新时间：2023-09-26

我有一个附在母版页上的页面。在这个页面中，我有一个更新面板，其中有一个asp.net面板。

这个面板有显示数据库数据的网格视图。目前我有固定的宽度和高度的面板。因此，如果用户屏幕分辨率大于指定的宽度和高度，则会留下空白。

我想避免这种情况。我读到我们可以使用javascript来获得用户屏幕的屏幕分辨率。我在一个没有附加到任何母版页的页面上尝试了这一点，并在该页面的正文中调用了javascript函数，效果很好。但是我不知道如何在一个附在主页上的页面中做到这一点。使用的代码是：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    function getWidth(width)
    {
        document.getElementById('Panel1').style.width = width+'px';
    }
</script>
</head>
<body onload="javascript:getWidth(screen.width)">
    <form id="form1" runat="server">
    <div>
        <asp:Panel ID="Panel1" runat="server" BorderStyle="Dotted" Height="50px" Width="125px" ScrollBars="Horizontal">
            </asp:Panel>
    </div>
    </form>
</body>
</html>

<script language="javascript" type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    function BeginRequestHandler(sender, args) {
    }
    function EndRequestHandler(sender, args) {
       getWidth(screen.width)
    }
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function getWidth(width)
    {
        $get('<%=Panel1.ClientID%>').style.width  = width+'px';
    }
</script>
相关文章：