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

发布于 2022-09-12 23:54:40 字数 679 浏览 21 评论 0

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

所以我估计应该是有两套页面,据我刚刚的了解,两套页面的实现方式,一般都是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没有任何变化。我上网查找后,大多数文章都是把响应式布局和两套页面的做法大概说了一下,或者着重说了前者。像知乎的这种方式,到底是怎么实现的呢?谢谢!最好能提供一些代码

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

坏尐絯℡ 2022-09-19 23:54:40

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

image.png

image.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文