css - 在 iphone 中覆盖桌面样式的问题

Question

我已经创建了一个在 Iphone、Ipad 和桌面上运行的 ASP.NET MVC 应用程序。当我尝试在 iphone 中运行应用程序时，我的桌面样式覆盖了 iphone 样式。如何避免这种情况？我已将我的桌面样式放在页面的顶部，如下所示。

 <link href="@Url.Content("~/Content/desktop.css")" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet"  href="@Url.Content("~/Content/jquery.mobile-1.0.min.css")" />
    <link type="text/css" rel="stylesheet"  href="@Url.Content("~/Content/mhome-style.css")" />
    <link type="text/css" rel="stylesheet"  href="@Url.Content("~/Content/bib.css")" />
    <link type="text/css" rel="stylesheet"  href="@Url.Content("~/Content/jplayer.blue.monday.css")" />

    @* Styles for Iphone *@
    <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)" href="@Url.Content("~/Content/iphone_portrait.css")" />
    <link type="text/css" rel="stylesheet" media="screen and (min-width: 321px) and (max-width: 480px)" href="@Url.Content("~/Content/iphone_landscape.css")" />
    @* Styles for Ipad *@
    <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="@Url.Content("~/Content/ipad_portrait.css")" />
    <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) " href="@Url.Content("~/Content/ipad_landscape.css")" />

Answer 1

我对 asp.net 不太了解，但看起来问题可以通过在桌面麦粒肿表上放置最小宽度媒体查询来解决，这样它们就不会加载到较小的设备上。