移动端窗口模式——iPhone / Android / iPad 尺寸预设

为什么移动端要单独设窗口

桌面端的窗口可以自由缩放——用户想拉多大拉多大。但移动端 APP 的界面尺寸由设备物理屏幕决定，开发者需要确保在目标设备上看起来正常。

PakePlus 在移动端配置页面提供了三档窗口模式预设，每档都有对应的默认尺寸。

三种预设的物理尺寸

这些数字是 PakePlus 设定的逻辑尺寸（pt/dp），不是物理像素——实际渲染时系统会根据设备的像素密度自动缩放。

各预设适用的设备

iPhone（390×844）

iPhone 预设能完美覆盖 iPhone 12/13/14 标准系列，Plus/Pro Max 系列也能正常显示（只是画布稍小，内容居中或从顶部开始布局）。

Android（412×915）

Android 设备碎片化严重，屏幕尺寸从 360×640（小屏）到 428×926（大屏）都有。412×915 是一个"中高端机型通用"的折中值。

iPad（820×1180）

iPad 预设覆盖了 iPad Air 和 iPad 10 代——iPad Pro 12.9" 会偏小，但 Web 内容通常响应式布局能自适应。

移动端的实际渲染行为

PakePlus 移动端 APP 运行时：

1. PakePlus 壳先启动
2. WebView 按预设尺寸渲染你的网页内容
3. 但实际显示区域会填充设备的整个屏幕——WebView 会自动缩放以适应屏幕物理尺寸
4. 你的网页 CSS 里的 width: 100% 会自然铺满整个屏幕

也就是说，预设尺寸更多是告诉 WebView 初始渲染用什么逻辑分辨率——最终显示效果由设备屏幕 + CSS 响应式布局共同决定。

对 Web 内容的要求

PakePlus 打包到移动端的网站/dist 目录，应该已经是响应式设计的：

理想状态

/* 你的网站应该有这些 */
body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.container { padding: 0 16px; }

/* 移动端和桌面端用不同样式 */
@media (min-width: 768px) { /* 平板/桌面 */ }
@media (max-width: 480px) { /* 手机 */ }

如果不是响应式

比如你的网站是固定宽度 1200px：

• 打包到 iPhone 上 → 内容会被横向截断或缩小显示（取决于 WebView 的缩放策略）
• 用户体验差，需要手动缩放

建议：如果要同时出桌面端和移动端 APP，最好让 Web 内容本身就是响应式的。Vue/React 项目加上 TailwindCSS 或 Bootstrap 就能快速实现。

移动端和桌面端可以是不同项目

PakePlus 不强制你用一个项目同时出桌面 + 移动端包。你可以：

第二种方案最灵活——移动端可以用专门为手机优化的 dist（响应式调过、触屏交互增强），桌面端用为大屏优化的 dist。

横竖屏

移动端 APP 默认允许横竖屏切换（由设备重力感应决定）。如果想锁定方向：

• 锁竖屏：PakePlus 高级配置里改 iOS 的 Info.plist 和 Android 的 AndroidManifest.xml
• 锁横屏：同上

需要在"更多配置"（核弹级）里手动写——没有 GUI 入口。

移动端独有的 WebView 特性