设备响应 css

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 表？

编辑*

我发现我想询问该设备是否是移动设备，如果是，则使用另一个样式表，因为现在很多手机的像素都高于 480 像素

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，则仅输出链接标签移动浏览器发出页面请求。

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

    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;
    }