在我的网站的一部分上伪造移动环境以预览响应版本？

Posted 2023-03-06

【中文标题】在我的网站的一部分上伪造移动环境以预览响应版本？

【英文标题】：Fake mobile environment on part of my website for a preview of the responsive version?

【发布时间】：2016-06-11 22:41:01

【问题描述】：

好吧，我的问题很简短：是否可以通过某种方式伪造移动环境，以便在常规网络浏览器中显示移动版本视图的预览？

我找不到任何东西 - 但也许我只是想不出正确的关键字来进行有效的搜索。另一方面，这也可能是根本不可能的。

---

请注意：我说的不是开发者控制台。我想要的是在生活网站上嵌入一个小部件。用例是一个可以更新信息、添加图像等的用户，我想要为用户提供移动预览。

【参考方案1】：

好的，我认为最好的方法是使用 iframe。但是有一些事情需要考虑。您的媒体查询不能针对设备，所以没有max-device-width 但max-width here 是原因

假设您想模拟您的网站在手机上的外观，您的媒体查询需要看起来像这样

 @media only screen and (min-width : 320px) and (max-width: 400px) 
    /*Your rules here*/

您用于该媒体查询的 iframe 需要 320 到 400 像素之间的任意宽度

【讨论】：

嗨！抱歉，我的问题有点不清楚。我想要的是在常规浏览器上向用户显示移动版本。

只有一个手机版？还是多个？

我不明白为什么这很重要。基本上我需要一个“特殊的”div，其中呈现的任何内容都遵循规则，就好像它在实际手机上一样。我的意思是：如果我可以拥有一个，那么我可以拥有很多。

@displayname 看看这个答案，我完全编辑了它！

啊，我明白了！我明天去看看。已经凌晨 3 点了^^ 我会尽快通知你。