JQuery与asp.net结合，区分手机浏览器与PC浏览器显示不同信息

最新推荐文章于 2021-08-13 09:28:24 发布

skyline_wolf

最新推荐文章于 2021-08-13 09:28:24 发布

阅读量1.3k

点赞数

分类专栏： C# Android 文章标签：判断手机浏览器 PC浏览器 jquery asp.net

本文链接：https://blog.csdn.net/lihb018/article/details/17437279

版权

C# 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Android

3 篇文章 0 订阅

订阅专栏

此代码是为了解决手机浏览器显示Header感觉多余，因为浏览器的标题已经有显示了；而如果PC浏览器不显示Header的话又感觉少了东西，因为PC浏览器的标题没有Header明显，不显示Header不美观。

代码特别简单，所以就不详解了。有疑问我再补充，欢迎大家提问！

asp.net代码

        static public List<String> MobileNames = new List<String> { "iphone", "android", "mobile", "ucweb", "opera mini",
                                                                    "samsung", "htc", "lg", "sonyericsson", "nokia", "mot",
                                                                    "blackberry", "j2me" };


        protected void Page_Load(object sender, EventArgs e)
        {
            String clientType = HttpContext.Current.Request.UserAgent.ToLower();
            Boolean isPCBrowser = true;
            foreach (String mobile in MobileNames)
            {
                if (clientType.Contains(mobile))
                {
                    isPCBrowser = false;
                    break;
                }
            }
            pnlHeader.Visible = isPCBrowser;
        }

因为浏览器可以随意设置 Request.UserAgent，所以没有绝对计算正确的办法判断浏览器是手机还是PC，此方便已在多种浏览器上测试95%正确。

JQuery代码

<body>
    <form id="form1" runat="server">
    <div data-role="page" id="page">

        <asp:Panel ID="pnlHeader" runat="server">
            <div data-role="header" data-theme="b">
		        <h2>新闻主页</h2>
	        </div>
        </asp:Panel>
        <div data-role="content" class="lineHeight2">
            <asp:BulletedList ID="listNews" runat="server" DisplayMode="HyperLink">
            </asp:BulletedList>
        </div>
        
	    <div data-role="footer" data-theme="d">
		    <h4>餐饮咨询</h4>
	    </div>
    </div>
    </form>
</body>

将JQuery的header放入asp.net的Panel中，这样在代码中就可以直接设置panel是否显示了