Question

我的意思是，如果用户从大屏幕（例如计算机或智能电视）打开网站，那么它将具有与该屏幕分辨率相关的不同控件组。当用户从移动设备浏览时，同一页面将具有不同控制与屏幕大小的关系。

Answer 1

在css中使用媒体查询，您可以在不同的屏幕中显示不同的控件。

Disadv：

您需要在两次中呈现所有控件

@media (max-width:768px) {
    .listbox {
        display: none;
    }

    .dropdown {
        display: block;
    }
}

@media (min-width:768px) {
    .listbox {
        display: block;
    }

    .dropdown {
        display: none;
    }
}

    <asp:ListBox runat="server" ID="ListBox1" CssClass="listbox">
        <asp:ListItem Text="Chennai"></asp:ListItem>
        <asp:ListItem Text="Mumbai"></asp:ListItem>
        <asp:ListItem Text="Hyderabad"></asp:ListItem>
        <asp:ListItem Text="Bangalore"></asp:ListItem>
        <asp:ListItem Text="Delhi"></asp:ListItem>
    </asp:ListBox>

<asp:DropDownList runat="server" ID="DropDownList1" CssClass="dropdown">
        <asp:ListItem Text="Chennai"></asp:ListItem>
        <asp:ListItem Text="Mumbai"></asp:ListItem>
        <asp:ListItem Text="Hyderabad"></asp:ListItem>
        <asp:ListItem Text="Bangalore"></asp:ListItem>
        <asp:ListItem Text="Delhi"></asp:ListItem>
    </asp:DropDownList>

如何通过手机或平板电脑访问时显示完全不同的网页？

1 个答案: