1

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

4

4 回答 4

0

如果你有谷歌浏览器，你可以打开一个网站并按 F12（在 Windows 上）进入开发者模式。

在左上角，您可以看到一个小智能手机图标。在此处输入图像描述

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

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

这是在模拟器上对这个问题的看法： 在此处输入图像描述

于 2015-12-27T23:44:14.040 回答
0

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

  1. 使用 Safari > Preferences > Advanced 启用“开发”菜单栏。您的菜单栏应如下所示：在此处输入图像描述
  2. 访问您的网站
  3. 转到开发 > 用户代理并选择您要模拟的设备/浏览器。在此处输入图像描述
于 2015-12-27T23:45:38.650 回答
0

你有两个选择。

  1. 模拟器的使用。

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

  1. 使用实际设备。

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

您需要将您的开发机器/laotop 和您的设备连接到无线并在您的开发机器上设置防火墙，以允许访问您本地无线网络上的网站。看看这个答案。

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

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

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

于 2015-12-28T00:13:06.307 回答
0

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

于 2015-12-27T23:42:53.150 回答