HTML注释怎么隐藏移动端内容_移动端特定内容注释技巧

<div class="some-content">
    <p>这段内容在所有设备上都可见。</p>
    <div class="hide-on-mobile">
        <p>这段内容只在PC端显示，移动端隐藏。</p>
    </div>
</div>

/* 默认情况下，所有内容都显示 */
.hide-on-mobile {
    display: block; /* 或者你希望的默认显示方式 */
}

/* 当屏幕宽度小于或等于768px时（通常作为移动设备的断点），隐藏特定内容 */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}

/* 如果是移动优先设计，可以反过来写 */
/* 默认情况下，移动端隐藏 */
/* .hide-on-mobile {
    display: none;
} */
/* @media (min-width: 769px) {
    .hide-on-mobile {
        display: block;
    }
} */

/* 默认样式（移动端优先） */
.my-element-to-hide {
    display: none; /* 默认在移动端隐藏 */
}

/* 当屏幕宽度大于等于769px时，显示该元素 */
@media (min-width: 769px) {
    .my-element-to-hide {
        display: block; /* 在PC端显示 */
    }
}

// 示例：使用JavaScript和matchMedia API
const mobileMediaQuery = window.matchMedia('(max-width: 768px)');
const contentToHide = document.querySelector('.js-hide-on-mobile');

function handleMobileChange(e) {
    if (e.matches) {
        // 处于移动端视口
        if (contentToHide) {
            contentToHide.style.display = 'none';
        }
    } else {
        // 处于桌面端视口
        if (contentToHide) {
            contentToHide.style.display = 'block';
        }
    }
}

// 初始检查
handleMobileChange(mobileMediaQuery);

// 监听变化
mobileMediaQuery.addEventListener('change', handleMobileChange);

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$isMobile = preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|rim)|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$userAgent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|er)|ai(ko|rim)|al(av|ca|co)|amoi|an(di|on)|az(fo|st)|c55v|c56v|c600|c610|c620|c670|c800|c801|c802|c803|c804|c805|c806|c807|c808|c809|c810|c811|c812|c813|c814|c815|c816|c817|c818|c819|c820|c821|c822|c823|c824|c825|c826|c827|c828|c829|c830|c831|c832|c833|c834|c835|c836|c837|c838|c839|c840|c841|c842|c843|c844|c845|c846|c847|c848|c849|c850|c851|c852|c853|c854|c855|c856|c857|c858|c859|c860|c861|c862|c863|c864|c865|c866|c867|c868|c869|c870|c871|c872|c873|c874|c875|c876|c877|c878|c879|c880|c881|c882|c883|c884|c885|c886|c887|c888|c889|c890|c891|c892|c893|c894|c895|c896|c897|c898|c899|c900/i',substr($userAgent,0,4));

if ($isMobile) {
    // 输出移动端特有的HTML内容
    echo '<div class="mobile-only-content">这是移动端专用的内容</div>';
} else {
    // 输出PC端特有的HTML内容
    echo '<div class="desktop-only-content">这是PC端专用的内容</div>';
}
?>

<picture>
    <source srcset="large.webp" media="(min-width: 768px)" type="image/webp">
    <source srcset="medium.webp" media="(min-width: 480px)" type="image/webp">
    <img src="small.webp" alt="响应式图片示例">
</picture>

<!-- 或者使用srcset -->
<img srcset="image-small.jpg 480w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
     src="image-default.jpg" alt="响应式图片">