http-server快速启动localhost与iPhone X兼容

之前分享过用webpack快速搭建启动一个localhost访问静态资源，其实node还提供了一个更简单的插件http-server。

http-server是一个简单的零配置的命令行http服务器，非常简单而且非常强大。

安装：npm install http-server -g

使用：在某个目录下启动：http-server

比如我在我的G盘启动

那我我就可以直接访问G盘目录下的所有文档：

要注意的是，如果文件夹里面有index.html，那么就会默认访问这个文件，这应该很多人都知道。

-p修改端口访问:http-server -p 8085

-o自动打开服务器http-server -o

其他的可以自己试一下，我改使用地址和启动HTTPS都有问题，估计跟服务原理有点关系。

参考地址：https://www.npmjs.com/package/http-server

iPhone X刚出来的时候，还是造成了一些小轰动，对于前端来说，也就是底部这一块比较头疼。实现兼容的方法很多，有些还蛮复杂的。尤其是刚出来的时候，移动端定位在最底部的被iPhone X的主按键遮挡了。

最近需要兼容这个iPhone X，于是公司大佬提供了一个文档：

https://webkit.org/blog/7929/designing-websites-for-iphone-x/?hmsr=funteas.com&utm_medium=funteas.com&utm_source=funteas.com

本着学习的心态忍者看了一遍，原谅自己的英语水平，确实还是看不懂，最后只看懂了使用方法。幸好IOS不像安卓这么复杂和碎片化，IOS提供的标准能快速都在IOS里面实现。

添加meta标签：

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
constant(safe-area-inset-bottom);
env(safe-area-inset-bottom);

简单理解就是，safe-area-inset-bottom是iPhone X底部按钮遮挡页面元素的时候会等于多出来的34px。

比如你一个fixed元素，bottom: 0,你想要兼容就直接：

bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);

如果你需要计算：

bottom: calc(1.306667rem + constant(safe-area-inset-bottom));
bottom: calc(1.306667rem + env(safe-area-inset-bottom));

可以理解为，不是iPhone X constant(safe-area-inset-bottom)等于0，是的话就是34px。文档里面只有env,大佬说一些低版本可能需要用到constant。

其实现在还有一个是JS的兼容方法，可以添加不同的判断，不只是iPhone X，但是用起来稍显复杂，还有一个就是第一次刷新的时候是无效的，必须滚动一下，因为这个插件是监听滚动实现。

（完）