给SteemMonsters加个iOS端的外壳App，可以用手机玩了！

最近玩上了SteemMonsters，但是只有网页版，没有手机端App，所以出门在外没有电脑玩不了，日常的碎片时间运用不起来，试了一下用手机的浏览器来玩，勉强可以玩，但是体验实在太差了，如图：

因为网页版对移动端的适配不好，可以看出很多图片都错位了、重叠了，而且顶部的地址栏和标题栏就占了屏幕1/3的空间，要通过拖拽才能看完所有内容。

于是，作为码农的我决定不能忍了，自己动手丰衣足食，做一个iOS的外壳App，嵌套网页版的SteemMonsters，并适配屏幕。

关键代码如下：

其实很简单，在App里通过WebView加载网页版，关键是如何做适配，这就要用到viewport这个meta标签，通过设置viewport的宽度和缩放比例，可以使网页在一个比较小的缩放比例下显示，从而模拟在电脑浏览器上的显示效果。这里的的宽度设置为1280px，缩放比例设为手机屏幕宽度/1280，最后通过JS把这个meta标签注入进去就ok了。

另外还做了全屏显示，少了占地方的地址栏，左下角加了一个刷新的按钮，可以在网络出问题时进行刷新，最终的效果如图：

可以看出效果还是很不错的，标题栏变窄了不少，也没有了重叠和错位的问题，试玩了一下，就跟在电脑上玩的一样。

最后，为了美观，还在网页版上截了一些图来PS了一下App的Logo：

完美，以后可以用手机玩SteemMonsters了，同时期待官方的手机版能早日到来！