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都有问题，估计跟服务原理有点关系。

参考地址：www.npmjs.com/package/htt…

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

最近须要兼容这个iPhone X，因而公司大佬提供了一个文档：

webkit.org/blog/7929/d…

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

添加meta标签：

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，可是用起来稍显复杂，还有一个就是第一次刷新的时候是无效的，必须滚动一下，由于这个插件是监听滚动实现。

Coding 我的笔记