如何在手机上查看HTML网页

Question

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

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

我指的是CCS：<link href="style.css" rel="stylesheet" type="text/css"/>，脚本是<script type="text/javascript" src="script.js">

我正在使用Google Chrome浏览器在PC上打开HTML，并尝试在手机上使用谷歌浏览器查看HTML。 我有一个Android手机。

谢谢。

Answer 1

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

Answer 2

您可以在 PC 上查看移动版本。 要做到这一点，

1. 打开您要查看的网站
2. 按 ctrl + shift + I（这会打开检查器）
3. 按 ctrl + shift + M（切换设备工具栏）

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

Answer 3

您可以使用本地服务器托管网页，如果移动设备连接到同一网络，则可以从移动设备导航到PC的专用IP。

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

要查找您的私人IP地址，请打开另一个命令行，然后键入ifconfig（如果在Windows上，则键入ipconfig）。

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

Answer 4

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

Answer 5

如果您只想在手机上测试网站，则可以通过USB连接手机，然后将chrome桌面与chrome mobile连接起来。

这是Google的指南：

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

这应该允许您在计算机上打开和编辑该站点，然后在手机上查看该站点是否正常工作。

对于永久性解决方案，您可以将网站托管在网络服务器上，并通过Internet连接到该网站。

Answer 6

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

Answer 7

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

Answer 8

答案很简单。

1. 确保您的电脑和手机连接到同一网络。
2. 在 Vscode 中安装实时服务器扩展。安装后会出现在 状态栏显示为“上线”。
3. 运行扩展程序。然后，您可以看到在 port_number（如 3000）上运行的站点。
4. 现在输入 cmd(windows)：ipconfig。
5. 从那里复制地址 IPv4。
6. 然后转到您的手机并像这样输入“ipv4:port_number”，您将看到您的 在移动设备上运行的网站。

Answer 9

首先，将此标签添加到标题上方 然后有两个重要的事情是 如果在单独文件的HTML代码中包含id CSS，请使用标记将其包含在HTML文件本身中，而对于Java Script相同，请将代码包含在标记本身中。 我还要强调的一件事是，如果您的网页包含PC上本地的图像，则这些图像将不会显示在您的手机上。 因此，请使用Google提供的所有图片并将其链接。 希望很明显：）