一、 安全區域(safe area)
與iphone6/6s/7/8相比，iphone x 無論是在螢幕尺寸、解析度、甚至是形狀上都發生了較大的改變，下面以iphone 8作為參照物，先看看iphone x尺寸上的變化：
蘋果對於 iphone x 的設計布局意見如下：
核心內容應該處於 safe area 確保不會被裝置圓角(corners)，感測器外殼(sensor housing，齊劉海) 以及底部的 home indicator 遮擋。也就是說 我們設計顯示的內容應該盡可能的在安全區域內；
二、h5頁面適配
1、viewport-fit的meta標籤作為適配方案；viewport-fit的預設值是auto。
viewport-fit取值如下：
auto
預設：viewprot-fit:contain;頁面內容顯示在safe area內
cover
viewport-fit:cover,頁面內容充滿螢幕
2、css constant()函式 與safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介紹.
當我們設定viewport-fit:contain,也就是預設的時候時;設定safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等引數時不起作用的。當我們設定viewport-fit:cover時：設定如下
body三、小程式適配
viewport-fit的適配方案不適合小程式。目前也沒有看到小程式有對iphone x等異形屏有特殊的介面或字段。小程式本身的底部tab欄對iphone x的適配也只是簡單的加了乙個白色底欄，提高了原有tab欄的位置。我們只能通過 wx.getsysteminfo 介面取獲取裝置資訊，該介面使用方法如下：
wx.getsysteminfo()}}wxml部分：})
這是乙個吸底按鈕區域wxss部分：
.fix-iphonex-button至於為什麼採用 68rpx，.fix-iphonex-button::after
可以根據實際情況調整樣式
微信小程式 頭部適配 膠囊
樣式如上圖所示它的要求 乙個頭部樣式自定義，它在膠囊左邊的內容又分為左右兩部分，如何讓它螢幕寬自適應？只需要用到wx.getmenubuttonboundingclientrect 獲取膠囊資訊就可以寫出來 例子如下 1 let menubutton wx.getmenubuttonbounding...
（微信小程式）一 初識微信小程式
需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...
微信小程式
2.單獨設定某一頁面下的頂部欄的背景顏色,在其對應的.json檔案下修改即可 3.this.setdata 注意 onload函式下面執行的是非同步操作，非同步操作裡面this.data.直接賦值，是無效的，必須使用this.setdata this.setdata msg he llo wor l...