如何查看我的网站内容跨设备的外观答案

【问题标题】：How to view how my website content looks across devices如何查看我的网站内容跨设备的外观
【发布时间】：2020-02-08 05:06:28
【问题描述】：

我有一个关于 css 的一般性问题：

我想添加媒体查询以适应不同的屏幕尺寸。但是，如果我在相应的屏幕尺寸上看不到它，我怎么知道给出不同查询的值是什么？有没有办法预览我的内容的外观？

【问题讨论】：

【解决方案1】：

您可以通过在网页上单击右键并单击左上角的小电话图标来使用 google chrome 的检查工具，以在各种设备尺寸上查看您的网站。

【讨论】：

【解决方案2】：

您可以进入Chrome的（或Opera的）开发工具并激活设备模式来模拟不同的屏幕场景.我喜欢使用允许您拖动和调整大小以检查不同大小的行为的响应模式以及向您显示 CSS 断点的 媒体查询标尺。

其他浏览器也有类似的工具，例如 Firefox 的'响应式设计模式'或 Edge 的'Emulation'，都可以通过Inspect Element访问。

然而，这种模拟并不能保证 100% 像设备一样运行。

【讨论】：

【解决方案3】：

大多数现代浏览器的开发者工具中都有设备模拟器。对于 Chrome，您可以在此处找到文档：https://developers.google.com/web/tools/chrome-devtools/device-mode/

对于更多的跨浏览器/设备测试，您可以使用：https://www.browserstack.com/screenshots

仍然没有什么比设置设备实验室更好的了，您可以在其中对一些最流行的设备进行物理测试。

希望对你有帮助，

【讨论】：

【解决方案4】：

您可以使用这样的工具，在不同的设备尺寸和分辨率下对其进行测试。

https://screenfly.org

【讨论】：