如何适配响应式设备，使水平阅读指引指针全屏显示？

你的代码里有两个核心问题导致指引线无法铺满响应式屏幕：

• .follower 设置了 left: -100%，同时JS用 window.innerWidth 做横向偏移，等于把整个指引线移到了屏幕可视区域外
• 固定定位的元素要铺满屏幕，不需要靠平移调整，直接设置正确的定位属性即可

修改方案 #

1. 修正CSS样式

去掉错误的横向偏移定位，让指引线从屏幕左侧起始，自然铺满宽度：

html,
body {
  padding: 0;
  margin: 0;
}
#content {
  height: 2048px;
  background-color: #ccc;
}
#status {
  position: fixed;
  top: 0;
  left: 0;
}

.follower {
  width: 100%;
  height: 5px;
  position: fixed;
  background: red;
  top: 0;
  left: 0; /* 改为从屏幕左侧开始 */
  transition: transform 0s ease-in-out;
}

2. 简化JS逻辑

横向不需要偏移，只保留纵向跟随鼠标/触摸点的逻辑：

// 同时兼容鼠标和触摸事件（适配手机平板）
const updateGuideLine = (e) => {
  // 处理触摸事件的坐标
  const y = e.type === 'touchmove' 
    ? e.touches[0].pageY - window.pageYOffset 
    : e.pageY - window.pageYOffset;
  
  const follower = document.querySelector(".follower");
  follower.style.transform = `translate3d(0px, ${y}px, 0)`;
};

document.addEventListener("mousemove", updateGuideLine);
document.addEventListener("touchmove", updateGuideLine);

HTML部分保持不变

<div class="follower"></div>
<div id="content"></div>

这样修改后，指引线会在所有设备上铺满屏幕宽度，同时跟随鼠标或触摸点垂直移动。

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