html - 如何在手机或平板访问时显示完全不同的网页？

Question

我的意思是，如果用户从大屏幕(如计算机或智能电视)打开网站，那么它会有不同的控件集，这些控件与该屏幕分辨率有关，而当用户从移动设备上冲浪时，同一页面会有不同的控件与屏幕尺寸相关的控件。

Answer 1

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

缺点:

• 您需要在两次渲染所有控件

  @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>