h5開發的一些個人總結

2021-09-11 17:42:40 字數 2067 閱讀 1541

"viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1">

複製**

理解:

為了精確的還原視覺稿,移動端樣式採用px作為預設單位,使用postcss-pxtorem作為轉換rem工具外掛程式

安裝

yarn add postcss-pxtorem

#ornpm i postcss-pxtorem -s

複製**

package.json配置(以width375視覺稿為準)

"postcss": ,

"postcss-pxtorem":

}}複製**

在index.html中重置root節點的rem數值

複製**

input的placeholder會出現文字位置偏上的情況:pc端設定line-height等於height能夠對齊,而移動端仍然是偏上,解決方案時是設定css line-height:normal;

a,button,input,optgroup,select,textarea 

複製**

a, img 

複製**

body

複製**

-webkit-touch-callout:none;  //系統預設選單被禁用;可以實現頁面因為長按彈出各種操作視窗

-webkit-user-select:none; //webkit瀏覽器

-khtml-user-select:none; //早期瀏覽器

-moz-user-select:none; //火狐

-ms-user-select:none; //ie10

user-select:none;

複製**

有時候需要使用到一些動效,但是會出現閃屏的情況

-webkit-transform-style: preserve-3d; //設定內嵌的元素在 3d 空間如何呈現:保留3d

-webkit-backface-visibility:hidden; //設定進行轉換的元素的背面在面對使用者時是否可見:隱藏

複製**

const path = require('path')

// 改為

var path = require('path')

複製**

針對此種情況只需對不觸發click事件的元素新增一行css**即可

cursor: pointer;

複製**

var date =new

date("2016-05-31 00:00:00 ");

複製**

這種寫法在安卓和pc上都正常的,唯獨在ios手機上會顯示nan,除錯發現,ios上只支援格式:

var date =new

date("2016/05/31 ");

複製**

除錯發現2016/05/31等同2016-05-31 00:00:00,也就是說ios預設就是從0開始計算的,我們不需要設定後面的時分秒為00:00:00

// 加上即可正常

box-sizing: border-box;

複製**

在這些樣式互動完成之後,在移動端我們需要進行介面除錯,這樣的話我們就很希望能像pc端的開發一樣,可以看到控制台, 網路請求情況這些資訊,能夠更好的幫助我們完成開發,定位問題。 之前想檢視介面資訊的話,是使用charles抓包工具的,但是個人覺得還是並不是那麼方便,沒有做到很好的整合。下面介紹一下我本人習慣使用的工具xcode

H5直播開發總結

關於直播,有很多相關技術文章,這裡不多說。作為前端,我們比較關心我們所需要的。直播的大致流程 但實際我們需要處理一些不可控的情況,這是非常麻煩的。比如說,直播方網路不好,直播方關閉了攝像頭,這些情況都會導致推流斷掉,在文章後面,我們詳細說這一塊。目前我們先考慮直播的三種狀態 直播前,直播中,結束。針...

spring restful的一些個人總結

額,好像就乙個 使用 pathvariable接收引數,引數值需要在url進行佔位,前端傳參的url url main mm am edit public string edit pathvariable long id,pathvariable string name 並且 pathvariabl...

H5開發問題總結

local 和session 都無法直接訪問物件,當你定義乙個 json 以後 通過setitem 和getiem 後發現無法正常使用,應為local session 都是支援字串的訪問,所以這是需要兩個步驟第一就是在存的時候吧json 轉化成字串,當取出的時候再把字串解析成json 例如 var ...