0

これは他のほとんどの質問に似ているように見えるかもしれませんが、この正確な解決策を見つけることはできませんか??

Device-max-width でレスポンシブな Web デザインが欲しいので、通常のブラウザー ユーザーが Web ページを最小化すると、通常の Web サイトになりますが、電話から入力するとモバイル Web サイトが表示されます (ただし、それでも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 を超えているようです

4

2 に答える 2

3

あなたはこれを試すことができます

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

デスクトップとモバイルの両方に共通のルールをロードしてから、以前のルールを元に戻すか、チェック時にall.css新しいルールを追加します。mobile.cssmax-device-width

jsbin の例を参照してください: http://jsbin.com/emafuk/1/edit
デスクトップ ブラウザーのサイズを変更しても、max-device-width で定義されたルールは適用されません

于 2012-10-18T08:01:15.927 に答える
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;
    }
于 2012-10-18T08:42:41.193 に答える