坑一、頁面所有圖片和icon都不顯示
上周五，有人在群里反饋有些用戶（其實就是一個）訪問我們的一個頁面，icon和圖片均不顯示；慣性思維以為是用戶網絡問題，后來想想不對，因為那個頁面所有的icon和圖片都不顯示，因此要么代碼的兼容性問題，要么是用戶設置了無圖模式進行瀏覽網頁；由于客服沒有提供用戶手機信息，因此
1、將background的簡寫全部改成全稱寫法，因為background-size的兼容性在安卓4.3及以前有問題
2、提示用戶關閉無圖模式；
總結：a、有的時候不光考慮代碼問題，還需要考慮瀏覽器設置或者用戶操作問題；b、遇見困惑時，有的時候自己在做其他事時，大腦可能會突然想到問題的解決方案（這次是自己刷牙的時候想到用戶開了無圖模式）c、package.json里的browserslist
"browserslist": [
"> 1% in CN",
"last 2 versions",
"not ie <= 8",
"Android >= 4.0",
"and_qq 1.2",
"Safari >= 6",
"and_chr >=38"
]
會影響打包后的css前綴
這一點相信大家都能夠理解，就像改.babelrc文件里的targets 下的browsers一樣會影響js版本
坑二、倒計時與實際相差4小時
在做一個新年活動，測試人員反饋一臺手機與實際正好相差4小時，當時覺得有點奇怪，如果相差8小時還能夠理解（8小時 可以考慮我們在東八區(qū)），為啥相差4小時呢？檢查代碼，發(fā)現沒有問題，于是在網上搜索也沒有發(fā)現這方面的資料，這時自己突然靈機一動，是不是手機的原本系統(tǒng)時間就有問題？一看手機，果然，手機系統(tǒng)時間慢了4小時。。。
總結：a、如果是個別問題，除了檢查代碼要考慮是不是用戶的設置問題；b、new Date() 出來的時間跟手機的系統(tǒng)時間相關；
坑三、Safari 11瀏覽器 new Date('2019-01-01 00:00:00') 會提示非法的日期，但Chrome 正常
其實這個如果仔細看 MDN的Date介紹就知道它強烈不推薦使用Date構造函數來解析日期字符串，因為不同的瀏覽器有不同的差異；
后來通過測試火狐72.0.2、IE11、Edge 44瀏覽器，發(fā)現IE11也會提示非法的日期，但火狐和Edge瀏覽器正常；再后來將日期改成 new Date('2019/05/05 00:00:00')，前面測試的幾個瀏覽器都正常；
總結：1、平時有事沒事多看一下MDN，或者多刷掘金之類的文章；2、多收集一下前端開發(fā)的那些坑；3、寫代碼后測試一定要充分，多試幾個瀏覽器(含不同種類和不同版本)；
坑四、頁面底部position:fixed 元素不顯示
客服反饋有幾個華為用戶，在購買產品頁面底部的“立即支付”一欄不顯示，檢查代碼，沒有發(fā)現問題。后來搜索資料，發(fā)現百度瀏覽器會把頁面上的元素為position:fixed給當作廣告屏蔽掉。。。 第二天獲取到一位用戶的user-agent信息，發(fā)現確實是百度瀏覽器內核（其實是華為手機系統(tǒng)自帶瀏覽器，但采用的是百度瀏覽器內核【更正：應該是用戶當時使用百度手機瀏覽器app訪問了我發(fā)給他的獲取user-agent信息的網址】），果然是百度瀏覽器內核搞的鬼。。?！靖航裉焱ㄟ^用戶的訪問日志拿到當時用戶的瀏覽器，發(fā)現不是百度內核，而是Mozilla/5.0 (Linux; U; Android 9;zh-cn; PAR-AL00 Build/HUAWEIPAR-AL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/57.0.2987.132 MQQBrowser/8.1 Mobile Safari/537.36，其實是QQ內核；另外也不是被屏蔽掉而是“立即支付”一欄被瀏覽器的底部菜單欄完全擋住了----我通過DevEco平臺上的一模一樣的云真機給模擬出來了。。。 】ps：由于fundebug只記錄一個月的信息，因此user-agent和用戶瀏覽器信息沒有保存下來。。?！靖拢嚎梢宰屵\維那邊拿到當時用戶的訪問日志】
總結
a、自己應該及時總結，避免信息被丟失了；
b、出現問題不要想當然，以為就是自己判斷的原因，一定要嚴謹的證實，這一點自己已經犯了兩次錯誤了，一次是購買產品頁面出現空白的情況，還有這一次；
c、解決問題后，一定要進行驗證是否是該原因導致的，有可能你分析是A原因，然后你采取了相應措施確實解決了該問題，但實際上其實不是A原因，而是B原因；
d、出現問題，一定不要放過；
e、運維知識和后端知識需要積累和學習，否則思維太局限了，也就是解決問題的思路太狹隘了；
f、讓用戶操作一些東西，可能不會很靠譜，因為用戶可能理解錯你的意思或者沒有明白你的意思；
g、出現問題，盡量由自己復現，而不是用戶復現，因為有的細節(jié)用戶是不知道的；
// 華為nova 3 自帶瀏覽器 user-agent
//Mozilla/5.0 (Linux; U; Android 9;zh-cn; PAR-AL00 Build/HUAWEIPAR-AL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/57.0.2987.132 MQQBrowser/8.1 Mobile Safari/537.36
// 華為nova 3 在微信里的user-agent
Mozilla/5.0 (Linux; Android 9; PAR-AL00 Build/HUAWEIPAR-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/045018 Mobile Safari/537.36 MMWEBID/6081 MicroMessenger/7.0.10.1580(0x27000AFA) Process/tools NetType/4G Language/zh_CN ABI/arm64
// 百度手機瀏覽器v5.1.0.0 user-agent 注：新版本沒有了baiduboxapp字段
Mozilla/5.0 (Linux; Android 4.4.2; OPPO R17 Build/NMF26X) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 flyflow/4.9.5.34 lite baiduboxapp/4.9.5.34 (Baidu; P1 4.4.2)
