知乎首页用PC和移动端打开时是不同的页面,URL相同,如何实现?

如果是媒体查询,我拖动浏览器窗口后,应该会影响它的样式,但事实上没有任何变化,所以大概不是用的媒体查询?

所以我估计应该是有两套页面,据我刚刚的了解,两套页面的实现方式,一般都是pc端和移动端对应不同的URL,通过User-Agent判断类型,然后使用JS跳转,然后我找了这样一串代码:

let is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
if (is_mobi) {
  window.location.href = "/pe";
}
else {
  window.location.href = "/";
}

这样当我第一次F12切换到移动端并刷新时,可以把URL改成/pe,就换到了移动端页面,但是只能判断一次,之后再切换回PC刷新时,没有任何变化。而且我这种方式改变了URL。

但是当我按F12,用移动端方式打开知乎首页并刷新一下,就进入了移动端的那套页面,URL没有任何变化。我上网查找后,大多数文章都是把响应式布局和两套页面的做法大概说了一下,或者着重说了前者。像知乎的这种方式,到底是怎么实现的呢?谢谢!最好能提供一些代码

阅读 2.2k
1 个回答

应该是在服务器上做的判断,根据请求头返回对应的资源/页面

image.png

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题