国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

H5手機(jī)端開發(fā)問題匯總及解決方案

Jaden / 2957人閱讀

摘要：方案回退時，跳到頁面頂部。踏坑第九式日期轉(zhuǎn)換的問題將日期字符串的格式符號替換成。歡迎感興趣的各路武林豪杰加入。

前言 
少俠，請留步，相見必是緣分，贈與你一部《踏坑秘籍》
扎馬步 踏坑第一式

ios豎屏拍照上傳，圖片被旋轉(zhuǎn)問題

解決方案

// 幾個步驟
// 1.通過第三方插件exif-js獲取到圖片的方向
// 2.new一個FileReader對象，加載讀取上傳的圖片
// 3.在fileReader的onload函數(shù)中，得到的圖片文件用一個Image對象接收
// 4.在image的onload函數(shù)中，利用步驟1中獲取到的方向orientation，通過canvas旋轉(zhuǎn)校正，重新繪制一張新圖
// 注意iPhone有3個拍照方向需要處理，橫屏拍攝，home鍵在左側(cè)，豎屏拍攝，home建上下
// 5.將繪制的新圖轉(zhuǎn)成Blob對象，添加到FormData對象中，然后進(jìn)行校正后的上傳操作
// 代碼有點雜，待整理后上傳，網(wǎng)上應(yīng)該是可以找到的
踏坑第二式

ios：DOM元素固定一邊，另一邊滾動，滾動很卡的問題

// (橫向滾動用的多些)簡單粗暴的辦法，樣式添加如下屬性
-webkit-overflow-scrolling: touch;
踏坑第三式

部分手機(jī)第三方輸入法會將頁面網(wǎng)上擠的問題

// 特定需求頁面，比如評論頁面，輸入框在頂部之類的
const interval = setInterval(function() {
    document.body.scrollTop = 0;
}, 100)
// 注意關(guān)閉頁面或者銷毀組件的時候記得清空定時器
clearInterval(interval);
踏坑第四式

iPhoneX適配

// 1.viewport meta 標(biāo)簽增加屬性viewport-fit=cover

// 2.body元素增加樣式
body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// 3.如有fixed底部的元素，也增加上面樣式
xxx {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff; // 記得添加background-color，不然會出現(xiàn)透明鏤空的情況
}
踏坑第五式

某些機(jī)型不支持video標(biāo)簽的poster屬性，特別是安卓

 用圖片元素 來代替poster
 播放前顯示，隱藏
踏坑第六式

CSS透明度顏色設(shè)置問題

Android部分不支持 hex寫法，推薦用rgba的寫法
#0000009c --> rgba(0, 0, 0, 0.61)
踏坑第七式

flex對低版本的ios和Android的支持問題

使用postcss的autoprefixer插件，自動添加瀏覽器內(nèi)核前綴，
并且增加更低瀏覽器版本的配置，自動添加flex老版本的屬性和寫法
autoprefixer({
    browsers: [
        "iOS >= 6",     // 特殊處理支持低版本IOS
        "Safari >= 6",  // 特殊處理支持低版本Safari
    ],
}),
踏坑第八式

ios 頁面回退到長列表出現(xiàn)灰色遮擋問題

方案1：對列表數(shù)據(jù)進(jìn)行緩存，比如redux之類的用法。
方案2：回退時，跳到頁面頂部。
const timer = setTimeout(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
}, 0);
踏坑第九式

ios 日期轉(zhuǎn)換NAN的問題

將日期字符串的格式符號替換成"/"。
栗子："yyyy-MM-dd".replace(/-/g, "/")
踏坑第十式（React）

未知錯誤異常，導(dǎo)致頁面崩潰，空白

React 16.x 增加了componentDidCatch() 生命周期方法
捕獲全局異常來進(jìn)行頁面的友好提示（具體用法網(wǎng)上有很多資料）
打完收招

晉級還需要多多修煉

前端攻城獅②群：592688854。歡迎感興趣的各路武林豪杰加入。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93837.html

相關(guān)文章

  • H5手機(jī)端開發(fā)問題匯總及解決方案

    摘要：方案回退時，跳到頁面頂部。踏坑第九式日期轉(zhuǎn)換的問題將日期字符串的格式符號替換成。歡迎感興趣的各路武林豪杰加入。 前言 少俠，請留步，相見必是緣分，贈與你一部《踏坑秘籍》 扎馬步 踏坑第一式 ios豎屏拍照上傳，圖片被旋轉(zhuǎn)問題 解決方案 // 幾個步驟 // 1.通過第三方插件exif-js獲取到圖片的方向 // 2.new一個FileReader對象，加載讀取上傳的圖片 // 3.在f...

    Codeing_ls 評論0 收藏0

  • H5手機(jī)端開發(fā)問題匯總及解決方案

    摘要：方案回退時，跳到頁面頂部。踏坑第九式日期轉(zhuǎn)換的問題將日期字符串的格式符號替換成。歡迎感興趣的各路武林豪杰加入。 前言 少俠，請留步，相見必是緣分，贈與你一部《踏坑秘籍》 扎馬步 踏坑第一式 ios豎屏拍照上傳，圖片被旋轉(zhuǎn)問題 解決方案 // 幾個步驟 // 1.通過第三方插件exif-js獲取到圖片的方向 // 2.new一個FileReader對象，加載讀取上傳的圖片 // 3.在f...

    lucas 評論0 收藏0

  • H5項目常見問題匯總及解決方案

    摘要：解決方案可以解決在手機(jī)上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設(shè)計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的顯示屏中，像素點個變?yōu)閭€。 原文鏈接 - https://github.com/FrontEndRo... H5項目常見問題及注意事項 Meta基礎(chǔ)知識： H5頁面窗口自動調(diào)整到設(shè)備...

    marser 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<