成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Jaden / 2959人閱讀

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

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

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

解決方案

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

ios：DOM元素固定一邊，另一邊滾動(dòng)，滾動(dòng)很卡的問題

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

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

// 特定需求頁面，比如評(píng)論頁面，輸入框在頂部之類的
const interval = setInterval(function() {
    document.body.scrollTop = 0;
}, 100)
// 注意關(guān)閉頁面或者銷毀組件的時(shí)候記得清空定時(shí)器
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，不然會(huì)出現(xiàn)透明鏤空的情況
}
踏坑第五式

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

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

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

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

flex對(duì)低版本的ios和Android的支持問題

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

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

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

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

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

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

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

晉級(jí)還需要多多修煉

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93837.html

相關(guān)文章

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

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

    Codeing_ls 評(píng)論0 收藏0

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

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

    lucas 評(píng)論0 收藏0

  • H5項(xiàng)目常見問題匯總及解決方案

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

    marser 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<