在 Android 上进行完整的 Web 开发：HTML、CSS 和 JavaScript

在 Android 上进行完整的 Web 开发

PocketCode 将你的 Android 设备变成一个完整的 Web 开发环境。无需 PC，即可创建、预览和部署网站。

初始设置

应用内预览

不需要输入任何服务器命令。点击编辑器顶部栏的地球图标（或菜单中的在 DevBrowser 中打开），PocketCode 就会在内置的 DevBrowser 中打开该文件，由你手机上的一个小型静态服务器提供服务。DevBrowser 是从编辑器打开的全屏浏览器，而不是编辑器旁边的一个窗格。

创建 Web 项目

1. 点击 New Project
2. 选择一个模板：HTML、React、Vue、TypeScript、Next.js，或者像 React + Node 这样的全栈模板
3. 项目将以完整的结构生成

全部 15 个项目模板都是免费的。React 和 Vue 模板从 CDN（unpkg.com）加载库，因此需要联网；Next.js 和全栈模板用于在手机上编写代码，而不是构建。

预览

布局

DevBrowser 占满整个屏幕。它的 DevTools 面板在竖屏时位于页面下方，横屏时位于页面右侧（点击 </> 按钮），拖动手柄即可在 25% 到 80% 之间调整大小。编辑器自带的分屏视图（Ctrl+\）是一个只读的第二窗格，不是实时预览。

重新加载

手动保存文件不会重新加载页面：请点击浏览器中的刷新。只有当 AI 代理写入文件时，页面才会自动重新加载。用下面这个页面试试：

<!DOCTYPE html>
<html>
	<head>
		<title>My App</title>
		<style>
			.hero {
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				background: linear-gradient(135deg, #1a1a2e, #16213e);
				color: white;
			}

			.title {
				font-size: clamp(2rem, 5vw, 4rem);
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="hero">
			<h1 class="title">Hello World!</h1>
		</div>
	</body>
</html>

开发者工具

集成的 DevTools

DevBrowser 有七个 DevTools 标签页：

• Console：查看页面日志并执行 JavaScript
• Network：监控 HTTP 请求
• Storage：页面保存的数据
• Elements：DOM 的只读快照；点击页面上的元素即可定位。这里不能编辑 DOM
• CSS：编写 CSS 并应用到页面，或浏览页面的规则
• Perf：加载指标和资源列表
• Audit：一套本地的 47 项启发式检查，涵盖性能、无障碍、最佳实践、SEO 和 PWA，不是 Lighthouse

响应式测试

在浏览器菜单中选择一个设备配置（21 个预设加上 Responsive）。配置只会改变 user agent 和视口尺寸：

视口的长边被限制在 1600 个 CSS 像素以内，因此 1920 × 1080 的配置会以 1600 × 900 显示。

框架代码示例

这些示例使用了 npm 导入和构建步骤。PocketCode 并未内置 npm，所以你无法在手机上构建它们；React 和 Vue 模板改用 CDN 版本（带 Babel 的 React 18、Vue 3），下面的 Tailwind 类名则需要 Tailwind 自己的 CDN 脚本或一次构建。

React

import { useState } from "react";

function Counter() {
	const [count, setCount] = useState(0);

	return (
		<div className="p-4">
			<p className="text-2xl">{count}</p>
			<button
				onClick={() => setCount(count + 1)}
				className="px-4 py-2 bg-blue-500 rounded"
			>
				Increment
			</button>
		</div>
	);
}

Vue

<template>
	<div class="p-4">
		<p class="text-2xl">{{ count }}</p>
		<button @click="count++" class="px-4 py-2 bg-green-500 rounded">
			Increment
		</button>
	</div>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

Vanilla + Tailwind

<div class="min-h-screen bg-gray-900 flex items-center justify-center">
	<div class="bg-gray-800 rounded-xl p-8 shadow-2xl max-w-md w-full">
		<h2 class="text-2xl font-bold text-white mb-4">Login</h2>
		<input
			type="email"
			placeholder="Email"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-4"
		/>
		<input
			type="password"
			placeholder="Password"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-6"
		/>
		<button class="w-full p-3 bg-blue-600 rounded-lg text-white font-semibold">
			Sign In
		</button>
	</div>
</div>

部署

PocketCode 并未内置 npm 和 npx，所以没有本地的 npm install -g vercel 这一步。部署通过 Backend Manager 进行：连接你的托管账户（Vercel、Netlify、Cloudflare 等，共 33 种服务），即可在手机上发起并跟踪部署。免费版一次运行一个部署；回滚和实时日志属于 Pro。

如果你更愿意从 git 推送，可以用内置的 Git 工具提交，让托管服务从仓库构建；或者通过 SSH 连接服务器，在那里部署。

移动端 Web 开发技巧

1. 使用相对单位：rem、em、%、vw/vh
2. 移动优先：先为移动端设计
3. Tailwind CSS：非常适合在小屏幕上开发
4. 小型组件：简短且模块化的文件
5. 自动保存：默认开启（每 2 秒一次），但 DevBrowser 不会自己刷新：保存后请点击刷新

---

借助 PocketCode，你可以用 Android 创建完整的网站。从落地页到复杂的 Web 应用，一切尽在掌心即可实现。