VSCode html 页面查看在手机端的效果

用VSCode写的 html 页面在电脑上显示没有问题，在手机上看却有一些溢出之类的问题，所以我找了一下怎么预览在不同客户端的效果。

这里提供两种比较简单的方法：

1. 在电脑端模拟手机效果。在 Chrome 浏览器中模拟手机设备并查看HTML文件在手机上的效果。
2. 使用移动设备调试功能。通过VSCode中的Live Server插件实现在手机上查看HTML文件。

文章目录

一、电脑端通过Chrome 浏览器查看

1. 用 Chrome 浏览器打开 html 页面，在网站上点击右键，选择“检查”。

2. 借助Chrome 浏览器调整分辨率。

二、手机端借助Live Server插件实现

1. 安装并配置Live Server插件

• 在VSCode中打开扩展（Extensions）（快捷键Ctrl+Shift+X）。
• 在搜索栏中输入”Live Server”。
• 找到并安装Live Server插件。

• 安装完成后，点击右下角的”Go Live”按钮即可启动服务器。

• 在 html 文件上点击右键，选择“Open with Live Server”，或使用快捷键 Alt+L 或者 Alt+O。

1. 连接手机和电脑到同一局域网

• 确保手机和电脑连接到同一个Wi-Fi网络。
• 在电脑中，打开命令提示符或终端窗口。
• 输入命令ipconfig（Windows）或ifconfig（Mac或Linux），查找你的电脑的IP地址。

1. 在手机上打开浏览器：

• 打开手机上的浏览器应用程序。
• 在地址栏中输入你电脑的IP地址，后面加上Live Server端口号，前面点击右下角的”Go Live”按钮启动服务器后原位置会显示端口号。默认的Live Server端口号是:5500。 例如，我的电脑IP地址为 192.168.2.181，则输入”http://192.168.0.100:5500″。

1. 浏览HTML文件：

• 在浏览器中，你将看到VSCode中打开的HTML文件列表。
• 点击你想要预览的HTML文件，即可在手机上查看该文件的内容。

通过以上步骤，你就可以在手机上查看VSCode中的HTML文件了。请注意，你的电脑和手机必须处于同一个局域网中，并且Live Server插件必须处于活动状态。关闭Live Server只需要在上述步骤1中最后一步中选择“Stop Live Server”。

参考内容
vscode html如何在手机上查看 • Worktile社区