在移动设备上预览网页答案

【问题标题】：Preview webpage at mobile device在移动设备上预览网页
【发布时间】：2020-02-08 11:16:21
【问题描述】：

我是 html 新手。我目前正在使用 django 创建一个网站，想知道有什么方法可以在手机上预览我的网站吗？例如，如果我将宽度设置为 1000 像素，这将在移动设备中表现如何？

【问题讨论】：

【解决方案1】：

首先，我建议使用像 Bootstrap 这样的框架，它可以让页面上的所有组件 100% 响应（组件会自动调整到显示大小），如果你想要的话。当您在浏览器上测试您的网站时，右键单击任意位置并选择“检查”。您将被提示一个查看窗口，您可以在其中选择您选择的移动设备来模拟您的网站。 See image

【讨论】：

【解决方案2】：

您可以使用 Google Chrome 开发工具，但我发现它们严重不足，而且经常不准确。他们不能很好地呈现我目前正在处理的网站。

我会推荐使用像 Ngrok 这样的工具。它可用于让您在本地计算机上托管开发环境，同时在移动设备上轻松查看站点。

【讨论】：

【解决方案3】：

如果您使用的是谷歌浏览器，您可以检查页面（CTRL + SHIFT + I），然后选择左上角的设备图标。此选项将向您展示您的网站将如何在移动设备上响应。

【讨论】：

【解决方案4】：

您应该构建一个响应式 Web 应用程序。响应式网页设计是一种建议设计和开发应根据屏幕尺寸、平台和方向响应用户行为和环境的方法。

实践包括灵活的网格和布局、图像以及对 CSS 媒体查询的智能使用。当用户从笔记本电脑切换到 iPad 时，网站应自动切换以适应分辨率、图像大小和脚本能力。

【讨论】：