最近玩上了SteemMonsters，但是只有网页版，没有手机端App，所以出门在外没有电脑玩不了，日常的碎片时间运用不起来，试了一下用手机的浏览器来玩，勉强可以玩，但是体验实在太差了，如图：
因为网页版对移动端的适配不好，可以看出很多图片都错位了、重叠了，而且顶部的地址栏和标题栏就占了屏幕1/3的空间，要通过拖拽才能看完所有内容。
于是，作为码农的我决定不能忍了，自己动手丰衣足食，做一个iOS的外壳App，嵌套网页版的SteemMonsters，并适配屏幕。
关键代码如下：
其实很简单，在App里通过WebView加载网页版，关键是如何做适配，这就要用到viewport这个meta标签，通过设置viewport的宽度和缩放比例，可以使网页在一个比较小的缩放比例下显示，从而模拟在电脑浏览器上的显示效果。这里的的宽度设置为1280px，缩放比例设为手机屏幕宽度/1280，最后通过JS把这个meta标签注入进去就ok了。
另外还做了全屏显示，少了占地方的地址栏，左下角加了一个刷新的按钮，可以在网络出问题时进行刷新，最终的效果如图：
可以看出效果还是很不错的，标题栏变窄了不少，也没有了重叠和错位的问题，试玩了一下，就跟在电脑上玩的一样。
最后，为了美观，还在网页版上截了一些图来PS了一下App的Logo：
完美，以后可以用手机玩SteemMonsters了，同时期待官方的手机版能早日到来！
码农终于干了件正经事
哈哈，终于干了老本行
Posted using Partiko iOS
向技术大佬低头
Posted using Partiko Android
阿杰牛b！
Posted using Partiko iOS
过奖了过奖了😆
Posted using Partiko iOS
我怎么能装？
装不了哦，因为iOS要上架AppStore才可以装，而这种外壳App是上不了架的，这只是我自己弄着玩的😝
Posted using Partiko iOS
@cn-curation 推荐文章
恭喜你～你的文章被飛鴿傳書 cn-curation 推荐! 「飛鴿傳書 cn-curation #108」推薦cn區博文：美丽星期天之捡到的宝 + 给 SteemMonsters 加个 iOS 端的外壳 App
推荐的文章除了会获得@htliao,@cn-malaysia,@cnbuddy,@cnstm和@team-cn团队点赞以外，我们还给你购买了SBI的会员。会员批准下来后你就会得到SBI的自动终身点赞。
请继续用心创作，期待好文！
哇噻，太牛B啦，膜拜下
Posted using Partiko Android
哈哈，谢谢～😄
Posted using Partiko iOS
怎樣可以傳到給我試用, :D 可以提議給官方做個暫待方案!!
麼有Mac不能裝Xcode是麼？
Posted using Partiko Android
对，你要搞台mac装xcode
Posted using Partiko iOS
Congratulations @slientstorm! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word
STOPDo not miss the last post from @steemitboard:
真的厲害👍 佩服佩服
Posted using Partiko Android