如何在Cargo Collective网站设置移动端提示或强制加载桌面版？

一、添加移动端访问提示 #

无需定位复杂设计元素，直接通过全局自定义代码添加全屏提示层：

1. 打开Cargo站点后台，找到「Custom CSS」（通常在「站点设置」>「自定义代码」板块），粘贴以下代码：

/* 移动端提示层基础样式 */
.mobile-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  color: #fff;
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}

.mobile-warning p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 10px;
}

/* 仅在移动端触发提示 */
@media (max-width: 768px) {
  .mobile-warning {
    display: flex;
  }
  /* 隐藏原站点内容，避免提示与页面重叠 */
  body > :not(.mobile-warning) {
    display: none;
  }
}

2. 接着在「Custom HTML」（全局头部/底部均可）添加提示内容：

<div class="mobile-warning">
  <div>
    <p>本站暂未完成移动端优化</p>
    <p>请使用桌面或笔记本电脑访问以获得最佳体验</p>
  </div>
</div>

移动端访问时会全屏显示深色背景的引导提示，原站点内容被隐藏，效果直接且稳定。

二、尝试强制加载桌面版（有限兼容） #

Cargo Collective的移动端优化是平台自动触发的，无官方关闭开关，但可通过以下方法尝试模拟桌面布局：

1. 在「Custom JavaScript」中粘贴代码：

// 修改viewport，强制移动端以桌面宽度渲染
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  const viewportMeta = document.querySelector('meta[name="viewport"]');
  if (viewportMeta) {
    viewportMeta.setAttribute('content', 'width=1200, initial-scale=1');
  }
}

2. 配合CSS增强效果，在「Custom CSS」中补充：

@media (max-width: 1200px) {
  body {
    min-width: 1200px;
    overflow-x: auto;
  }
}

这段代码强制页面最小宽度为1200px，超出部分横向滚动，模拟桌面版布局。但需注意：该方法可能因Cargo平台的更新失效，部分设备浏览器兼容性不佳。

注意事项 #

• 优先选择「移动端提示」方案，不受Cargo平台限制，效果更可靠；
• 所有自定义代码均需在Cargo后台的「自定义代码」板块添加，避免直接修改Designer内元素样式引发冲突。

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