如何在多种屏幕尺寸上查看我的网站？

Posted 2023-04-17

【中文标题】如何在多种屏幕尺寸上查看我的网站？

【英文标题】：How do I view my site on multiple screen sizes?

【发布时间】：2016-04-01 20:41:03

【问题描述】：

好的，所以我知道如何为多种屏幕尺寸编写代码。但是，在我的网站上线之前，我不知道如何在移动设备上查看我的代码。请帮忙！

【问题讨论】：

嘿@KeeganBrown，如果答案有助于解决您的具体问题，我会将其标记为已接受。否则，如果它仍然有帮助，我会投赞成票。

【参考方案1】：

您可以使用可以模拟各种蜂窝设备的模拟器。例如，这些可以使用名为 Bluestacks 的程序下载。

【参考方案2】：

如果您有 Google Chrome，您可以打开一个网站并按 F12（在 Windows 上）进入开发者模式。

在左上角，您可以看到一个小智能手机图标。

单击它并选择一个设备。然后刷新页面。

Chrome 将直接在您的计算机上模拟智能手机用户的体验，因此您可以从那里进行测试。

这是在模拟器上对这个问题的看法：

【参考方案3】：

如果您使用 safari，这里是解决方案。

使用 Safari > 首选项 > 高级启用“开发”菜单栏。您的菜单栏应如下所示： 访问您的网站 转到开发 > 用户代理并选择您要模拟的设备/浏览器。

【参考方案4】：

你有两个选择。

使用模拟器。

您需要的是任何现代浏览器。几乎每个现代浏览器都会为您提供大致相似的仿真器功能，您可以在其中选择目标设备/分辨率。 @intboolstring 和 @Pither 已经为您提到了 safari 和 chrome 选项。 IE & Edge 也有类似的功能（大家可以自行探索或查看此链接IE Emulator feature）。

使用实际设备。

您需要什么 - 1) 无线路由器 2) 您的开发机器/笔记本电脑，它有一个 Web 服务器（如 Windows 上的 IIS）和 3) 一些移动设备（我假设您至少有一部具有移动浏览器的智能手机在上面）。

您需要将您的开发机器/laotop 和您的设备连接到无线网络，并在您的开发机器上设置防火墙，以允许通过本地无线网络访问您的网站。 Check out this answer.

完成此操作后，您应该可以通过在移动浏览器中绑定http://your.dev.machine.ipv4:port-if-applicable/landingpage.html，将您的网站加载到任何通过无线连接的设备上。

（要查找您机器的 ipv4 地址，转到命令提示符并键入 ipconfig 并按 Enter - 我假设您使用的是 Windows）

您可能会将测试限制在一组更小的设备（您可以访问的设备）上。但这会给你一个真实世界的想法（如果不是更好的想法）你的网站如何在设备上呈现和表现。