微信h5頁面製作總結

2022-03-30 22:59:37 字數 1562 閱讀 8743

一、尺寸問題

設計圖的尺寸我剛開始要的是750*1334px,但是在實際應用中發現忽略了手機的狀態列和導航欄的高度 

iphone的設計標準,狀態列和導航欄的獨立畫素高度分別為40px和88px

android系統的可以更改狀態列和導航欄的高度,可以取預設值為48px和100px

所以設計元素的展現內容應該是去掉狀態列和導航欄的高度,取最大值148px,即最後的尺寸應該是750*1186

第二、頁面切換問題

之前沒有寫過h5頁面,所以就直接用swiper控制頁面切換。用乙個變數控制是哪個頁面開始與結束動畫

第三、動畫卡頓問題

開啟gpu加速,最好是只有當前頁開啟加速,其他頁關閉。用兩個變數來控制

開始很多gqu的話會有頁面元素缺失。

頁面盡量少用絕對定位於相對定位

硬體加速最好只用在animation或者transform上。不要濫用硬體加速,因為這樣會增加效能的消耗,如果濫用反而會使動畫變得更加卡,這樣就得不償失了。

不要使用left、top來控制動畫,使用translate來控制動畫(left與top會觸發瀏覽器repaint,translate開啟硬體加速)

第四、錯誤提示彈框

用原生的alert就好

第五、蘋果手機返回按鈕問題

手動往歷史記錄裡新增乙個記錄,與當前的**一模一樣,監控返回按鈕,重新整理當前頁面(window.reload())

第六、對於safari以及chrome,可能會在使用animation或者transition時出現閃爍的問題,可以使用以下的解決方法:

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-perspective: 1000;

-moz-perspective: 1000;

-ms-perspective: 1000;

perspective: 1000;

/**webkit上也可以用以下語句 **/

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

最近瀏覽器提出了乙個will-change屬性,該屬性允許開發者告知瀏覽器哪乙個屬性即將發生變化,從而為瀏覽器對該屬性進行優化提供了時間。下面是乙個使用will-change的示例:

.example 

參考**:

//螢幕尺寸,解析度,畫素,ppi之間的關係

//h5頁面製作bug總結

//gpu加速頁面xuanran

H5頁面微信分享

例如 標題 title 描述 自動獲取當前瀏覽頁的url 不可自定義,無法修改 縮圖 可以在父層 div 上設定 display none 或者對 img 設定 position absolute visibility hidden 例如 display none logo512.png alt d...

H5及H5頁面是什麼意思?如何製作H5頁面?

h5是html5的簡稱。html5是html最新的修訂版本,是一種超文字標記語言。h5有兩大特點 首先,強化了 web 網頁的表現效能。其次,追加了本地資料庫等 web 應用的功能。第二步 選擇 高階模式 點 建立應用。第三步 進入製作頁面。九個控制項,通過點選新增到製作介面,控制項的選擇使用按照你...

實現H5頁面微信分享功能

官方是在title下邊引入 我是在body下面直接引用的,沒發現有什麼問題 script 接下來要配置config,我的是通過公司提供的js介面獲取的資訊,並且呼叫方法。var title 這裡面寫分享的名字 公司介面url location.href ajax.send ajax.onreadst...