小屏幕大影响：为功能手机开发Web应用的被遗忘艺术

翻盖手机并未消亡。相反，全球每年售出超过2亿台非智能手机，这大致相当于2024年iPhone的销量。即使在美国，每年也有数百万台翻盖手机售出。随着网络运营商努力关闭2G服务，新激励措施鼓励设备升级，进一步增加了对经济型翻盖手机的需求。这在南亚和非洲尤其明显，iPhone对绝大多数人口来说难以负担（以印度平均工资计算，需要工作两个月才能买得起最便宜的iPhone）。

与“智能”手机类似，翻盖手机（技术上称为“功能手机”）正变得越来越强大。它们现在提供智能手机应有的功能，如4G、WiFi、蓝牙和运行应用程序的能力。如果你的目标用户是南亚和非洲，或欧洲和北美的利基市场，有像Cloud Phone和KaiOS这样的翻盖手机应用平台。为这些平台开发类似于开发渐进式Web应用（PWA），分发管理跨越多个应用商店。

术语解析

翻盖手机有许多名称。非智能手机被戏称为“傻瓜手机”。技术行业称这种设备类别为“功能手机”。在地区上，它们在欧洲也被称为按钮手机或基本手机，在印度被称为键盘手机。它们都有一些共同特点：它们是预算手机，屏幕小，有物理按钮。

为什么为翻盖手机开发应用？

一个常见的误解是，使用翻盖手机的人不想要应用。事实上，许多首次使用互联网的用户渴望发现新内容和服务。虽然这个市场不如苹果的App Store有利可图，但有几个理由你应该为翻盖手机开发应用。

有机增长

你不需要付费获取翻盖手机用户。与Android或iOS不同，根据GoGoChart的数据，每次安装成本（CPI）平均约为2.5-3.3美元，而翻盖手机应用产生大量的有机下载。

品牌引入

当翻盖手机用户最终升级到智能手机时，他们会搜索他们已经熟悉的应用。这反过来会在Google Play Store上产生更多安装，在较小程度上也会在Apple App Store上产生安装。

低竞争

KaiOS有约1700个应用，Cloud Phone小部件更少。与此同时，Google Play有超过155万个Android应用可供选择。作为千分之一脱颖而出比作为百万分之一容易得多。

技术基础

翻盖手机并非一直能运行应用。直到2009年Ovi Store（后更名为“Nokia Store”）推出，翻盖手机才获得可安装的第三方应用，这比苹果旗舰iPhone推出晚了一年。当时，应用是为碎片化的Java 2移动版（J2ME）运行时编写的，仅在某些诺基亚型号上可用，并且通常需要与文档不全的专有包（如Nokia UI API）集成。

今天，翻盖手机平台已拒绝原生运行时，转而支持标准Web技术，以降低进入门槛并吸引更广泛的软件开发人员。在现代翻盖手机上运行的应用主要用许多开发人员熟悉的语言编写——HTML、CSS和JavaScript——以及随之而来的一系列权衡和考虑。

硬件

翻盖手机价格实惠，因为它们使用低端、通常过时的硬件。低端是预算手机，运行实时操作系统（RTOS），芯片如Unisoc T107，RAM少至16MB。这些手机通常支持Opera Mini和Cloud Phone。高端是最近发布的TCL Flip 4，运行KaiOS 4.0，搭载高通骁龙4s，1GB RAM。

虽然很难准确比较如此不同的硬件，但苹果最新的iPhone 16 Pro内存多500倍（8GB RAM），支持下载速度比低端翻盖手机快1000倍（4G LTE CAT-1）。

性能

你可能认为翻盖手机应用很容易受到预算硬件稀缺可用资源的限制。KaiOS就是这种情况，因为应用在设备上执行。代码需要被压缩，缩略图需要缩小，性能需要在一系列真实设备上评估。你不能简单地在桌面上用小视口测试。

然而，作为远程浏览器，Cloud Phone和Opera Mini都通过将计算密集的渲染卸载到服务器来克服硬件限制。这意味着性能通常与现代桌面相当，但可能导致一些古怪且有时不直观的特性。

例如，如果你的应用获取1MB文件来显示数据表，这不会消耗用户1MB的移动数据。只有屏幕内容的变化会流式传输给用户，消耗带宽。另一方面，复杂动画和页面过渡会消耗数据，因为每一帧至少是部分屏幕刷新。尽管有这种怪癖，Opera Mini估计与传统浏览器相比，它节省高达90%的数据。

安全

不要将敏感数据存储在浏览器存储中。这对翻盖手机也适用，安全关切与传统Web浏览器类似。虽然应用通常不能访问其他应用的数据，但KaiOS不加密客户端数据。对远程浏览器的影响不同。

Opera Mini根本不支持客户端存储，而Cloud Phone将数据加密存储在其数据中心，而不是用户手机上。

为现代翻盖手机设计

简化，不要缩小适应

尽管这些设备有持久力，但它们几乎被所有Web开发框架和库忽略。流行的前端Web框架如Bootstrap v5将所有低于576px的屏幕分类为超小。另一个流行选择Tailwind将最小的CSS断点——布局改变以适应不同设备最佳观看体验的特定宽度——设置得更高，为40em（640px）。像Norman Nielsen这样的设计行业专家建议最小断点“用于移动设备，通常高达500px”。像这样的标准提倡在小屏幕上采用一刀切的方法，但一些小的设计变化可以对新互联网用户产生巨大影响。

小屏幕在尺寸、分辨率、对比度和亮度上差异很大。

小屏幕可用性需要独特的设计考虑——不是缩小适应模型。虽然所有这些设备的屏幕宽度都小于最小常见断点，但平等对待它们将是错误。

“缩小效果差：A List Apart、Chrome for Developers和MDN Web Docs在Cloud Phone上的截图。（大预览） 缩小效果好：Rest of World、BBC News和TED Talks在Cloud Phone上的截图。（大预览）

大多数网站在翻盖手机上渲染过大。它们使用字体太大，图形太详细，粘性标题占据屏幕四分之一。更糟糕的是，许多网站通过隐藏水平溢出的内容来禁用水平滚动。这在触摸屏上允许平滑滚动，但也使得在翻盖手机上无法阅读超出视口的文本。

下表包括物理显示尺寸、分辨率和示例，以更好地理解翻盖手机和预算智能手机小屏幕的多样性。

注意：翻盖手机屏幕小，通常在1.8”–2.8”之间，分辨率为240x320（QVGA）或128x160（QQVGA）。作为比较，Apple Watch Series 10有1.8”屏幕，分辨率416x496。按现代标准，翻盖手机显示小，分辨率、像素密度、对比度和亮度低。

为小屏幕开发

向框架的默认值添加自定义命名断点，而不是手动使用媒体查询覆盖类定义的布局尺寸。

Bootstrap v5

Bootstrap在_variables.scss Sass文件中定义了一个映射$grid-breakpoints，包含从SM（576px）到XXL（1400px）的默认断点。使用map-merge()函数扩展默认值并添加你自己的断点。

1
2

@import "node_modules/bootstrap/scss/functions";
$grid-breakpoints: map-merge($grid-breakpoints, ("xs": 320px));

Tailwind v4

Tailwind允许你在tailwind.config.js配置文件中扩展默认主题。使用extend键定义新断点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    extend: {
      screens: {
        "xs": "320px",
       ...defaultTheme.screens,
         },
    },
  },
};

成功的关键（键盘）

成功的翻盖手机应用支持使用方向键（D-pad）进行键盘导航。这与电视遥控器的导航模式相同：四个箭头键（上、下、左、右）和中央按钮。要构建一个优秀的翻盖手机优化应用，提供一个导航方案，用户可以通过这些有限控制快速学习如何导航你的应用。确保用户可以导航到屏幕上所有可见控制。

使用d-pad导航PodLP（左）和虚拟光标（右）。

尽管一些翻盖手机平台支持使用模拟光标进行空间导航，但它并非普遍可用，并创建更差的用户体验。此外，虽然支持键盘导航的应用将与模拟光标一起工作，但反过来不一定成立。Opera Mini Native仅提供虚拟光标，Cloud Phone仅提供空间导航，KaiOS支持两者。

如果你开发时考虑键盘可访问性，支持翻盖手机导航很容易。作为一般指南，永远不要移除焦点轮廓。相反，覆盖默认样式并使用框阴影匹配你的应用配色方案，同时适当适应。自动聚焦在序列中的第一项——列表或网格——但小心避免键盘陷阱。最后，确保列表将新聚焦的项目完全滚动到视图中。

不要让用户打字

如果你曾经在智能手机上打长消息感到沮丧，结果不小心被擦除，现在想象一下当你在翻盖手机上使用T9打消息时的沮丧。尽管预测打字有进步，但用仅九个键填写表格甚至编写一条180字符的推文是一项苦差事。

无论你做什么，不要让翻盖手机用户打字！

幸运的是，很容易适应设计以减少打字。尽可能偏好数字。允许用户使用他们的电话号码注册（容易打字），发送仅包含数字的PIN码或一次性密码（OTPs），并从邮政编码查找地址详细信息。这些每个都节省大量时间，避免通常导致用户流失的沮丧。

或者，与单点登录（SSO）提供商集成以“使用Google登录”，这样用户不必重新输入安全团队要求至少八个字符长并包含字母、数字和符号的密码。只需记住，许多新互联网用户不会有电子邮件地址。他们可能不知道如何访问它，或者他们的手机可能无法访问电子邮件。

最后，当可用时，允许用户通过语音搜索。尽管用T9打英语很困难，但打像泰米尔语这样的语言更难，泰米尔语在南印度和斯里兰卡有超过9000万使用者。尽管有几十年的进步，自动完成和预测打字等技术很少可用于此类语言。虽然不完美，但有像Whisper Tamil这样的AI模型可以执行语音到文本，感谢像IIT Madras语音实验室这样的大学的研究人员。

翻盖手机浏览器和操作系统

开发翻盖手机Web应用的另一个挑战是它们碎片化的生态系统。各种公司使用不同方法允许网站和应用在有限硬件上运行。至少有三个主要的基于Web的平台，所有操作方式不同：

• Cloud Phone是最新的解决方案，2023年12月推出，使用基于现代Puffin（Chromium）的远程浏览器，作为应用商店。
• KaiOS，2016年推出，使用Firefox OS作为基础，是一个移动操作系统，整个系统是一个Web浏览器。
• Opera Mini Native是迄今为止最古老的，2005年推出作为广告支持的远程浏览器，仍使用十年前 discontinued 的Presto引擎。

尽管两个平台都是远程浏览器，Cloud Phone和Opera Mini之间有显著差异，这些差异并不立即明显。

从左到右：Nokia 6300 4G (KaiOS)、Viettel Sumo 4G V1S (Cloud Phone)和Itel Neo R60+ (Opera Mini)。（大预览）

翻盖手机已经走了很长的路，但每个平台支持不同的能力。你可能需要根据支持的内容移除或缩减功能。最好针对你的应用可行的最低共同标准。

对于信息密集的新闻网站、维基或博客，Opera Mini的过时技术足够好用。对于视频流服务，Cloud Phone和KaiOS都工作良好。相反，像Opera Mini和Cloud Phone这样的远程浏览器无法处理高帧率，因此只有KaiOS适合实时交互游戏。就像设计一样，没有一刀切的方法来开发翻盖手机。即使所有平台都是基于Web的，它们需要不同的权衡。

小屏幕，大影响

翻盖手机市场正在增长，特别是对于支持4G的型号。Reliance的JioPhone是最成功的型号之一，销售超过1.35亿台其旗舰KaiOS支持手机。公司计划稳步增加4G翻盖手机推出，因为它将印度2.5亿2G用户迁移到4G和5G。

类似活动正在新兴市场进行，如Vodacom的14美元Mobicel S4，南非的Cloud phone支持设备，和Viettel赠送70万台4G翻盖手机给当前2G用户以升级偏远和农村地区的用户。

总活跃翻盖手机市场规模估计难以获得，更难找到按平台细分。KaiOS声称启用“全球超过1.6亿台手机”，而“超过3亿人使用Opera Mini保持连接”。仅推出一年后，Cloud Phone声明“一百万Cloud Phone用户已经从90个国家访问服务”。根据大多数估计，已经有数亿支持Web的翻盖手机用户渴望发现新产品和服务。

结论

数亿人仍然依赖翻盖手机保持连接。然而，这些用户甚至被针对新兴市场的产品 largely 忽略。现代软件开发通常优先考虑最新和最伟大的，而不是找到方法经济实惠地服务超过26亿未连接的人。如果你不为使用键盘导航的小屏幕设计，你正在将整个人口排除在访问你的服务之外。

翻盖手机在2025年仍然重要。随着持续的网络过渡，数百万人将升级，数百万人将首次使用4G翻盖手机连接。这创造了将你的应用交到新连接用户手中的机会。感谢现代远程浏览器技术，现在比以往更容易在翻盖手机上构建和启动你的应用，无需昂贵和耗时的优化以在低端硬件上运行。