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 我的筆記