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

資訊專欄INFORMATION COLUMN

H5手機端開發問題匯總及解決方案

lucas / 2931人閱讀

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

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

ios豎屏拍照上傳，圖片被旋轉問題

解決方案

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

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

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

部分手機第三方輸入法會將頁面網上擠的問題

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

iPhoneX適配

// 1.viewport meta 標簽增加屬性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，不然會出現透明鏤空的情況
}
踏坑第五式

某些機型不支持video標簽的poster屬性，特別是安卓

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

CSS透明度顏色設置問題

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

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

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

ios 頁面回退到長列表出現灰色遮擋問題

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

ios 日期轉換NAN的問題

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

未知錯誤異常，導致頁面崩潰，空白

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

晉級還需要多多修煉

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52092.html

相關文章

  • H5手機端開發問題匯總及解決方案

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

    Codeing_ls 評論0 收藏0

  • H5手機端開發問題匯總及解決方案

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

    Jaden 評論0 收藏0

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

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

    marser 評論0 收藏0

發表評論

0條評論

lucas

男|高級講師

TA的文章

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