开发移动应用的一些心得

发表于 | 分类于

响应式键盘

想要在手机上调出一个类似下图的键盘（即包含一个“去往”按钮，点击后直接跳转），按照以下格式书写即可，最少需要一个 form、input 标签和 type、name 属性。用到了 HTML5 的新 type 值 url。

1
2
3
<form>
    <input type="url" name="address" />
</form>

一个完整的：

1
2
3
<form onsubmit="location.href = document.getElementById('address').value; return false;">
    <input type="url" id="address" name="address" />
</form>

比如输入“http://www.impony.com” 就可以直接点击“去往”跳转了。

如果想在手机上调出一个类似下图的键盘（即包含一个“放大镜”按钮，寓意搜索），则可以使用 HTML5 的新 type 值 search。

1
2
3
<form>
    <input type="search" name="keyword" />
</form>

生成一个全屏遮罩，在手指滑动时不让遮罩下方页面滚动

1
2
3
4
5
6
7
8
9
<style>
#mask { position: absolute; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); }
</style>
<div id="mask"></div>
<script>
document.getElementById("mask").addEventListener("touchmove", function (e) {
    e.preventDefault();
}, false);
</script>

重点就在这个 preventDefault，在 touchmove 的时候禁止掉该事件的默认动作，这样遮罩下方页面再长也不会滚动了。

访问本地资源

1
file://localhost

这样就可以方便用户选择使用 SD 卡上的文件了

效仿 iOS 的滑动删除效果

在 touchstart 的时候记录下初始座标 screenX 和 screenY，然后在 touchmove 的时候更新当前座标，最后在 touchend 的时候计算一下当前座标与初始座标的关系即可。

考虑到手机屏幕较小，所以要有一定的容错能力。我个人是采用了计算直线斜率的方法来容错的，只要斜率在 0.3 以内，并且滑动距离超过了 100px 就都有效。

根据移动设备屏幕分辨率来动态的改变页面放大倍率

用 Media Query 或者其他方法来进行响应式布局有些太繁琐了，有些情况下只需要根据移动设备不同的屏幕分辨率来简单调整一下 body 的 fontSize 即可满足要求，类似下面这样。

1
2
3
4
5
6
var screenSize = Math.min(window.innerWidth, window.innerHeight);
if(screenSize > 480 && screenSize <= 640) {
    document.body.style.fontSize = "1.2em";
} else if(screenSize > 640) {
    document.body.style.fontSize = "1.5em";
}