如何在手机上查看我的 HTML 网页答案

【问题标题】：How do I view my HTML webpage on my phone如何在手机上查看我的 HTML 网页
【发布时间】：2019-06-11 19:10:58
【问题描述】：

我创建了一个 HTML 网页，它也使用 CSS 和 JS。当我在我的 PC 上查看它时，它可以正常工作并且看起来应该如何。

把它放在我的手机上的最佳方式是什么？我试图将所有相关文件放到我的手机上，但它只会加载基本 HTML，所有文件都在同一个文件夹中，因为 HTML 代码只引用 CSS 和 JS 的名称，因为它们在同一个文件中个人电脑。

我将 CCS 引用为：<link href="style.css" rel="stylesheet" type="text/css"/>，脚本引用为 <script type="text/javascript" src="script.js">

我正在使用 Google Chrome 在我的 PC 上打开 HTML，并尝试在我的手机上使用 google chrome 查看它。我有一部安卓手机。

提前致谢。

【问题讨论】：

您是否相对引用了文件（例如 /css/theme.css 而不是 C:\Users\JackU\project\css\theme.css）？
另外，你用什么打开html文件？
@JakeSteam 我将文件引用为 scr="script.js" 和 href="style.css"。我在我的电脑上用 chrome 打开它，在我的手机上用 chrome 打开它。我会更新我的问题

【解决方案1】：

您可以使用本地服务器来托管网页，如果它们连接到同一网络，则可以从您的移动设备导航到您电脑的私有 IP。

我更喜欢live-server npm 包。只需输入npm install -g live-server。导航到您的网站所在的目录，然后运行live-server。它还会显示您正在运行的端口。

要找出您的私人 IP 地址，请打开另一个命令行并输入 ifconfig（或 ipconfig，如果您在 Windows 上）。

在您的移动设备中导航到 ip-address:port-number，您将看到您的网站。私有 IP 地址和端口号示例：192.168.1.40:8080

【讨论】：

【解决方案2】：

在移动设备上进行预览的最简单方法是使用以下网站： https://search.google.com/test/mobile-friendly? 我希望这可以帮助您确定您的问题。

【讨论】：

【解决方案3】：

如果您只是想在手机上测试您的网站，您可以通过 USB 连接手机并将您的 chrome 桌面与 chrome mobile 连接。

这是来自 Google 的指南：

这应该允许您在计算机上打开和编辑该网站，并在您的手机上查看它是否有效。

对于永久解决方案，您可以在网络服务器上托管您的网站并通过互联网连接到它。

【讨论】：

【解决方案4】：

您可以在电脑上查看手机版。为此，

您甚至可以查看不同屏幕尺寸的屏幕

【讨论】：

【解决方案5】：

使用您的 IDE 启动网页，使其暴露于您计算机上的端口。查找您计算机的 IP，并确保您与移动设备位于同一网络上。在浏览器中导航到 PC 的 ip + 端口，您将看到它。

【讨论】：

【解决方案6】：

将您的 css 样式放入 html 标记中，然后在您的手机中打开它。它会起作用的。虽然不确定它是否会显示您的图片，但您可以测试网站的响应能力。

【讨论】：

【解决方案7】：

从 Play 商店下载在浏览器应用中打开。然后在您的移动设备上转到您的内部存储并打开：在浏览器中打开。

【讨论】：

【解决方案8】：

尝试以下步骤：

【讨论】：