orico-official-website/app/index/view/mobile/public/header.html

<header class="oircoEgapp-head">
    <div class="headtop">
        <a><img src="__IMAGES__/logo.png" class="headerlogimg" /></a>
        <div class="action-r">
            <div class="right img-responsive cursor_p">
                <span class="icon-category cursor_p top-menu-toggle"><i class="icon-menu-svg"></i></span>
                <span class="icon-keyword cursor_p top-search-toggle"><i class="icon-search-svg"></i></span>
                <span class="mask-up cursor_p top-country-toggle"><i class="icon-lag-svg"></i></span>
            </div>
        </div>
    </div>
    <!-- 顶部菜单-->
    <div class="top-menu">
        <div class="it-ct">
            <div class="it-1"><a href="/">{:lang_i18n('首页')}</a></div>
        </div>
        <div class="it-ct">
            <div class="it-1">
                <div class="it-1-more">{:lang_i18n('产品列表')}<i class="icon-arrow"></i></div>
                {notempty name="header_categorys"}
                {volist name="header_categorys" id="ca"}
                <div class="it-1-2"><a href="{:url('product/category', ['id' => $ca.id])}">{$ca.name}</a></div>
                {/volist}
                {/notempty}
            </div>
        </div>
        {notempty name="header_navigation"}
        {volist name="header_navigation" id="nav"}
        <div class="it-ct">
            <div class="it-1">
                {empty name="nav.children"}
                <a href="{$nav.link}">{$nav.name}</a>
                {else/}
                <div class="it-1-more">{$nav.name}<i class="icon-arrow"></i></div>
                {volist name="nav.children" id="ch"}
                <div class="it-1-2"><a href="{$ch.link}">{$ch.name}</a></div>
                {/volist}
                {/empty}
            </div>
        </div>
        {/volist}
        {/notempty}
    </div>
    <!-- 顶部搜索-->
    <div class="top-search">
        <div class="marsk-container">
            <div class="popup-quick">
                <div class="ac-close float_r "><img src="__IMAGES__/close.png"></div>
                <div class="search-in">
                    <form action="{:url('product/search')}" method="get">
                        <input type="text" name="keywords" placeholder="{:lang_i18n('产品')} USB 2.0...">
                        <button type="submit" id="search-btnput" class="search-button">{:lang_i18n('搜索')}</button>
                    </form>
                    <div class="title-text">
                        <p><a href="#">{:lang_i18n('搜索历史')}</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 顶部国家选择-->
    <div class="top-country">
        <div class="mask"></div>
        <div class="action-sheet">
            <div class="menu-title">
                <div class="menu-name">{:lang_i18n('请择地区')}</div>
                <div class="close-icon">
                    <img src="__IMAGES__/close.png">
                </div>
            </div>
            <ul>
                {volist name="header_languages" id="la"}
                <li>
                    <a href="{$la.lang_url}" target="_blank">
                        <img src="{$la.lang_icon}">{$la.country_en_name} - {$la.lang_en_name}
                    </a>
                </li>
                {/volist}
            </ul>
        </div>
    </div>
</header>
<script type="text/javascript">
    $(function() {
        // 点击顶部菜单
        $(".top-menu-toggle").click(function() {
            $(".top-menu").slideToggle(800);
        })
        // 点击一级菜单显示二级菜单
        $(".it-1-more").on("click", function() {
            $('.it-1-2').hide();
            $('.icon-arrow').removeClass('rotate');
            $(this).siblings('.it-1-2').slideToggle(800);
            $(this).find('.icon-arrow').addClass('rotate');
        });
        //点击搜索
        $('.top-search-toggle').click(function() {
            $(".marsk-container").show();
        })
        $('.ac-close').click(function() {
            $(".marsk-container").hide();
        })
        // 顶部国家选择
        $('.top-country-toggle').click(function(){
            $(".mask,.action-sheet").show();
        })
        $('.top-country .close-icon').click(function(){
            $(".mask,.action-sheet").hide();
        })

// 缓存检测结果
    let _deviceType = null;
    
    /**
     * 检测当前设备类型
     * @returns {'mobile'|'tablet'|'desktop'}
     */
    function detectDevice() {
        if (_deviceType) return _deviceType;
        
        const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
        const screenWidth = window.innerWidth || document.documentElement.clientWidth;
        const userAgent = navigator.userAgent.toLowerCase();
        
        const isTablet = 
            userAgent.includes('tablet') || 
            (userAgent.includes('android') && !userAgent.includes('mobile')) || 
            userAgent.includes('ipad') || 
            userAgent.includes('kindle');
        
        _deviceType = 
            isTouch && (screenWidth < 768 || !isTablet) ? 'mobile' : 
            isTouch && screenWidth >= 768 ? 'tablet' : 'desktop';
        
        return _deviceType;
    }
    
    /**
     * 显示设备类型提示
     */
    function showDeviceAlert() {
        const device = detectDevice();
        const message = `您正在使用${
            device === 'mobile' ? '手机' : 
            device === 'tablet' ? '平板' : '电脑'
        }访问本页面`;
        
        // 使用原生alert
        alert(message);
        
        // 或者使用自定义样式的提示（需要引入相关CSS）
        /*
        $('<div class="device-alert">' + message + '</div>')
            .css({
                position: 'fixed',
                top: '10px',
                right: '10px',
                padding: '10px 15px',
                background: '#333',
                color: 'white',
                borderRadius: '5px',
                zIndex: '9999'
            })
            .appendTo('body')
            .fadeIn()
            .delay(3000)
            .fadeOut(function() {
                $(this).remove();
            });
        */
    }
    
    // 页面加载完成后自动检测并提示
    $(document).ready(showDeviceAlert);
    
    // 暴露检测方法供外部使用
    $.detectDevice = detectDevice;
    })
</script>