知乎首页用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没有任何变化。我上网查找后,大多数文章都是把响应式布局和两套页面的做法大概说了一下,或者着重说了前者。像知乎的这种方式,到底是怎么实现的呢?谢谢!最好能提供一些代码
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
应该是在服务器上做的判断,根据请求头返回对应的资源/页面