如何在asp.net中根据屏幕大小加载唯一的css文件？答案

【问题标题】：How to load the only css file based on screen size in asp.net?如何在asp.net中根据屏幕大小加载唯一的css文件？
【发布时间】：2014-11-14 19:29:49
【问题描述】：

我深入研究了ebay, facebook,amazon, etc 等网站，发现用户访问他们的网站时，他们会检测显示器屏幕分辨率/尺寸并将其存储在 cookie 中，并根据屏幕分辨率加载 css 文件。

如何在 asp.net 中实现这个场景。我有一个响应式布局和using media queries，根据分辨率的变化。

但现在我想修复用户首先检测他们的屏幕分辨率并仅根据该结果加载 css 文件。

有什么建议！！

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="mobile.css" />

【问题讨论】：

你在谷歌上看吗？找的例子太多了，这里有一个stackoverflow.com/questions/23071521/…
先试着理解问题！！我认为您没有阅读我的问题，我没有要求基于媒体加载 css。为简单起见，请访问 facebook 并检查 cookie 中您找到的屏幕尺寸。然后增加或减少浏览器的宽度高度，它不会加载响应式css。但如果您从手机登录，它将显示移动 CSS。我想实现这个。
请注意，我没有对这个问题投反对票（还没有投票给任何东西）。现在浏览器的大小只能通过javascript实时获取，然后你将这个大小发送给后面的代码并使用它。另一种方式是读取浏览器签名，另一种方式是它自己的css。

标签： javascript jquery html css asp.net

【解决方案1】：

您可以使用流动代码。

你必须把这个JavaScript放到<head>标签中。

$(function () 
  {
    var ScrnHeight = $(window).height();
    var ScrnWidth = $(window).width();

    if (ScrnWidth <= 360) { // for mobile view
        $("<link/>", {
            rel: "stylesheet",
            type: "text/css",
            href: "/styles/mobile.css"
        }).appendTo("head");
    }
    else { // for desktop view 
        $("<link/>", {
            rel: "stylesheet",
            type: "text/css",
            href: "/styles/main.css"
        }).appendTo("head");
    }
});

【讨论】：

@Hassaan Khan - 如果答案有用，请点击“正确”或“点赞”，以便其他人找到正确的解决方案。
对不起，我没有要求