Question

这可能看起来与大多数其他问题相似，但似乎无法找到这个确切的解决方案？

我想要一个能够响应Device-max-width的网页设计，这样当普通浏览器用户最小化他的网页时，它就会成为常规网站，但是当你从手机进入时，你会看到移动网站（但它仍然使用css）atm我有这个：

<link href="<%= AutoVersioning.VersionizePath("/css/all.css") %>" rel="stylesheet" type="text/css" media='screen and (min-width: 480px)' />
<link href='/css/mobile.css' rel='stylesheet' type="text/css" media='screen and (min-width: 0px) and (max-width: 480px)' />

这是在这里执行此操作的简单方法，它要求浏览器宽度而不是设备宽度..

总结一下我如何询问设备宽度以及如何使用它来选择css表？

修改*

我发现我想询问该设备是否是移动设备，如果是，则使用另一个样式表，因为似乎很多手机现在已经有超过480px

Answer 1

你可以试试这个

<link href  ="all.css" rel="stylesheet" />
<link href  ="/css/mobile.css" rel='stylesheet'
      media ='screen and (max-device-width: 480px)' />

为桌面版和移动版加载all.css通用规则，然后恢复以前的规则，或在mobile.css检查max-device-width

时添加新规则

参见jsbin示例：http://jsbin.com/emafuk/1/edit
即使您调整桌面浏览器的大小，也不会应用使用max-device-width定义的规则

Answer 2

如果您想在不考虑屏幕尺寸的情况下使用移动设备的特定样式表，我建议检查服务器端的用户代理，如果确定是移动CSS，则只输出移动CSS的链接标记移动浏览器发出页面请求。

这是我通常用来检查请求是否来自移动浏览器的功能。

    public static bool MobileBrowserDetected()
    {
        var context = HttpContext.Current;

        var userAgent = context.Request.ServerVariables["HTTP_USER_AGENT"];

        if (userAgent != null)
        {
            userAgent = userAgent.ToLower();
        }

        // Checks the user-agent
        if (userAgent != null)
        {
            // Checks if its a Windows browser but not a Windows Mobile browser
            if (userAgent.Contains("windows") && !userAgent.Contains("windows ce") && !userAgent.Contains("iemobile"))
            {
                return false;
            }

            // Checks if it is a mobile browser
            const string pattern = "up.browser|up.link|windows ce|iphone|iemobile|mini|mmp|symbian|midp|wap|phone|pocket|mobile|pda|psp|android";
            var mc = Regex.Matches(userAgent, pattern, RegexOptions.IgnoreCase);
            if (mc.Count > 0)
                return true;

            // Checks if the 4 first chars of the user-agent match any of the most popular user-agents
            const string popularUserAgent = "|acs-|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv|palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3c |wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda-|";
            if (popularUserAgent.Contains("|" + userAgent.Substring(0, 4) + "|"))
                return true;
        }

        // Checks the accept header for wap.wml or wap.xhtml support
        var accept = context.Request.ServerVariables["HTTP_ACCEPT"];
        if (accept != null)
        {
            if (accept.Contains("text/vnd.wap.wml") || accept.Contains("application/vnd.wap.xhtml+xml"))
            {
                return true;
            }
        }

        // Checks if it has any mobile HTTP headers

        var xWapProfile = context.Request.ServerVariables["HTTP_X_WAP_PROFILE"];
        var profile = context.Request.ServerVariables["HTTP_PROFILE"];
        var opera = context.Request.Headers["HTTP_X_OPERAMINI_PHONE_UA"];

        return xWapProfile != null || profile != null || opera != null;
    }

设备响应css

2 个答案: