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

Question

我创建了一个使用CSS和JS的HTML网页。当我在电脑上查看时，它的功能和外观都正常。

最好的方法是将其放在我的手机上吗？我尝试将所有相关文件放到手机上，但只会加载基本的HTML文件。所有文件都与HTML代码位于同一文件夹中，只有在PC上，CSS和JS与HTML代码在同一文件中，因此HTML代码只引用CSS和JS的名称。

我使用以下代码引用CSS：<link href="style.css" rel="stylesheet" type="text/css"/>，引用JS的代码为：<script type="text/javascript" src="script.js">

我在电脑上使用Google Chrome打开HTML文件，并尝试在我的安卓手机上使用Google Chrome查看它。

提前感谢您的帮助。

- JackU

---

你是在相对引用文件吗？（例如/css/theme.css，而不是C:\Users\JackU\project\css\theme.css）？ - Jake Lee

另外，你用什么打开HTML文件？ - Jake Lee

@JakeSteam 我正在使用 scr="script.js" 和 href="style.css" 来引用文件。我在电脑上使用 Chrome 浏览器打开它，在手机上也是用的 Chrome 浏览器。我会更新我的问题。 - JackU

Answer 1

您可以使用本地服务器托管网页，并在移动设备连接到同一网络时从移动设备导航到您的PC的私有IP。

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

要查找您的私有IP地址，请打开另一个命令行并键入ifconfig（如果您使用Windows，则为ipconfig）。

在移动设备中导航到IP地址:端口号，即可查看您的网站。示例私有IP地址和端口号：192.168.1.40:8080

- yigitusta

---

太棒了，感谢您的帮助。一开始我因为没有安装 nodejs 而遇到了困难，但现在已经可以工作了！ - JackU

Answer 2

在移动设备上预览的最简单方法是使用网站，例如： https://search.google.com/test/mobile-friendly？希望这能帮助您确定问题所在。

- Taha Hamedani

Answer 3

您可以在电脑上查看移动版本。 要实现这一点，

1. 打开您想要查看的网站
2. 按下ctrl + shift + I(这将打开检查器)
3. 按下ctrl + shift + M(切换设备工具栏)

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

- mariko

Answer 4

请尝试以下步骤：

1. 确保您的电脑和手机连接到同一个网络。
2. 在 Vscode 中安装 live server 扩展。安装后，它将显示在状态栏上，名称为 Go Live。
3. 运行该扩展程序。然后，您可以在 port_number（例如：3000）上看到网站正在运行。
4. 现在在 cmd（Windows）中键入：ipconfig。
5. 从那里复制 Address IPv4。
6. 然后转到您的手机，并键入类似于这样的内容：Adress IPv4:port_number，您将在手机上看到您的网站正在运行。

- SaKSh

Answer 5

如果您只想在手机上测试您的网站，可以通过USB连接您的手机，并将Chrome桌面版与Chrome移动版连接起来。

以下是来自Google的指南：

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

这将使您能够在计算机上打开和编辑网站，并在手机上查看以查看其是否正常工作。同时，您还可以在手机上查看页面时使用桌面开发工具。

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

- k1ngjulien

Answer 6

使用IDE启动网页，以便在计算机上暴露一个端口。查找计算机的IP地址，并确保您的移动设备与同一网络连接。在浏览器中导航到PC的IP地址+端口，即可看到它。

- Stefan

Answer 7

将您的CSS样式放在HTML标记内，并在手机上打开它。它会起作用。不确定它是否会显示您的图像，但您可以测试您网站的响应能力。

- Mesta

Answer 8

从应用商店下载Open in Browser 应用，然后打开你移动设备上的内部存储，选择“在Open in Browser中打开”。

- Violan Naidoo

---

这个答案并没有太大帮助。那个人已经知道如何打开页面了，他遇到的问题是加载资源。 - Anton Rusak

请阅读 SO 的如何回答文章：https://stackoverflow.com/help/how-to-answer - klediooo

当您在浏览器应用程序中打开时，来自CSS和图像的资源将会加载。 - Violan Naidoo