如何实现网站在移动设备端展示完全不同的独立适配页面

直接在你找到的判断脚本的注释位置写HTML标签是没用的，<script>标签里只能写JS代码，要插入HTML需要操作DOM，给你两种可直接用的实现方式：

方式1：动态注入对应端内容 #

这种方式不会提前加载另一端的冗余资源，性能更好，直接替换原有脚本即可：

<!-- 页面留一个统一的内容挂载节点 -->
<div id="root"></div>

<script>
const root = document.getElementById('root')
if ("ontouchstart" in document.documentElement) {
  // 移动端HTML内容直接写在反引号包裹的字符串里，格式和普通HTML完全一致
  root.innerHTML = `
    <header>移动端导航</header>
    <div class="mobile-page">
      <h1>移动端页面</h1>
      <p>这里放你独立开发的移动端版本全部HTML结构</p>
    </div>
  `
  // 按需加载移动端专属CSS、JS
  const mobileStyle = document.createElement('link')
  mobileStyle.rel = 'stylesheet'
  mobileStyle.href = './css/mobile.css'
  document.head.appendChild(mobileStyle)
} else {
  // 桌面端HTML内容写在这里
  root.innerHTML = `
    <header>桌面端导航</header>
    <div class="desktop-page">
      <h1>桌面端页面</h1>
      <p>这里放你已经调试完成的原有桌面端HTML结构</p>
    </div>
  `
  // 按需加载桌面端专属CSS、JS
  const desktopStyle = document.createElement('link')
  desktopStyle.rel = 'stylesheet'
  desktopStyle.href = './css/desktop.css'
  document.head.appendChild(desktopStyle)
}
</script>

方式2：预写内容控制显隐 #

如果不想把HTML全写在JS字符串里，可以把两端内容提前写在页面里，通过判断控制显示隐藏，写起来更直观：

<style>
/* 初始默认隐藏所有端内容，判断完成后再显示对应端，避免加载时闪烁 */
.mobile-wrap, .desktop-wrap {
  display: none;
}
.active {
  display: block;
}
</style>

<!-- 移动端内容按普通HTML格式正常写在这里 -->
<div class="mobile-wrap">
  <header>移动端导航</header>
  <div class="mobile-page">
    <h1>移动端页面</h1>
    <p>这里放你独立开发的移动端版本全部HTML结构</p>
  </div>
  <link rel="stylesheet" href="./css/mobile.css">
</div>

<!-- 桌面端内容按普通HTML格式正常写在这里 -->
<div class="desktop-wrap">
  <header>桌面端导航</header>
  <div class="desktop-page">
    <h1>桌面端页面</h1>
    <p>这里放你已经调试完成的原有桌面端HTML结构</p>
  </div>
  <link rel="stylesheet" href="./css/desktop.css">
</div>

<script>
if ("ontouchstart" in document.documentElement) {
  document.querySelector('.mobile-wrap').classList.add('active')
} else {
  document.querySelector('.desktop-wrap').classList.add('active')
}
</script>

补充提示：仅用ontouchstart判断存在小概率误判，部分带触屏的Windows笔记本也会命中该条件，可以在判断条件里补充宽度校验提升准确率，比如把判断条件改成if ("ontouchstart" in document.documentElement && window.innerWidth < 1024)，就能过滤掉绝大多数触屏桌面设备。

内容的提问来源于stack exchange，提问作者ۦۦ ۦۦ ۦۦ ۦۦ