在移动应用开发中，常常需要使用多张不同尺寸的图片适配不同的设备。这个问题可以通过 Cordova 提供的 storyboard 配置解决。但是 storyboard 配置需要手动创建，十分繁琐。为了减少这个工作量，我们可以使用 npm 包 cordova-storyboard-image-config。
什么是 cordova-storyboard-image-config？
cordova-storyboard-image-config 是一个 npm 包，用来生成 Cordova storyboard 配置文件，从而实现图片的多尺寸适配。
如何安装 cordova-storyboard-image-config？
使用 npm install 命令就可以安装 cordova-storyboard-image-config。
npm install cordova-storyboard-image-config
如何使用 cordova-storyboard-image-config？
首先，需要在 Cordova 项目的根目录下创建一个名为 storyboards 的文件夹。
然后，在 storyboards 文件夹中创建一个 JSON 配置文件，例如：
-- -------------------- ---- -------
-
--------- -
-
-------------- ------------
-------- ----
----------- -------------------------
--
-
-------------- -----------
-------- ----
----------- ------------------------
--
-
-------------- ------------
-------- ----
----------- -------------------------
--
-
-------------- -----------
-------- ----
----------- ------------------------
--
-
-------------- ------------
-------- -----
----------- --------------------------
--
-
-------------- -----------
-------- ----
----------- -------------------------
--
-
-------------- ------------
-------- -----
----------- ---------------------------
--
-
-------------- -----------
-------- -----
----------- --------------------------
--
-
-------------- ------------
-------- -----
----------- ----------------------------
--
-
-------------- -----------
-------- -----
----------- ---------------------------
-
--
------- -
-
-------------- ------------
-------- -----
----------- --------------------
--
-
-------------- -----------
-------- ----
----------- -------------------
--
-
-------------- ------------
-------- -----
----------- -----------------------
--
-
-------------- -----------
-------- -----
----------- ----------------------
-
-
-- 然后，在 Cordova 项目的根目录下执行以下命令：
cordova-storyboard-image-config storyboards/storyboard.json
以上命令会自动生成 storyboard 配置文件，并且自动将 storyboard 配置文件添加到 Cordova 项目的 config.xml 文件中。
使用示例
在 Cordova 项目中使用 storyboard 配置文件来实现不同尺寸的图片适配。在 img 文件夹下添加一张图片，例如 my_image.png，然后在 HTML 文件中使用以下代码：
<img src="img/my_image.png" data-cordova-landscape="img/landscape.png" data-cordova-portrait="img/portrait.png" />
以上代码会自动根据当前设备的横竖屏状态来加载相应的图片。如：
- 在 iPhone 上，横屏状态下会加载 img/landscape.png，竖屏状态下会加载 img/portrait.png。
- 在 iPad 上，横屏状态下会加载 img/landscape.png，竖屏状态下会加载 img/portrait.png。
结论
cordova-storyboard-image-config 可以帮助我们快速生成 Cordova storyboard 配置文件，从而实现多尺寸图片的适配。使用该工具可以极大地提高移动应用开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005682181e8991b448e4421