混合開發應用中所遇到的坑
阿新 • • 發佈：2019-02-02
- 2018-5-20 場景：使子元素內容垂直居中使用。父元素：display:table；子元素：display:table-cell;vertical-align:middle。table有marin,無padding;td有padding無margin，所以只能使用border來設定。但設定之後每個塊之間有一道這樣藍色細線，大概程式碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" 結果樣圖如下
* 2018-06-08 場景如下：由於app引用的Vue單頁面，所以當跳轉到某個頁面時，標題肯定得變，我在beforRouteEnter裡面去改寫相應頁面的標題。雖然標題會改變，可會出現閃動的狀況，由A-B-A狀態的變動變動原因：一：安卓或者IOS那邊有控制標題的控制元件，這時候狀態為A 二：當嵌入H5頁面的時候，標題又會由Vue單頁面的標題的控制，未解析到Vue單頁面中的JS部分狀態為B 三：當解析到JS部分時，改變document.title，狀態為A。
解決辦法：由IOS或者Android來控制標題的改動- 2018-06-08 場景：合同租約字型太小，無法放大。
解決辦法：Android和IOS放開viewport縮放許可權即可。- 2018-06-15 判斷內嵌H5網頁是在app中開啟還是在瀏覽器中開啟？
場景：在app中用到微信的JSSDK來進行微信朋友圈的分享。但當開啟分享按鈕後，有個複製連線地址，然後使用者到瀏覽器中開啟，發現並沒有分享的按鈕操作。
解決辦法：ios和andorid在相應頭的UA上加上一段特定的UA欄位，通過前端的判斷，然後是否線上分享到朋友圈這個按鈕- 2018-07-09 移動端overflow:hidden不生效問題
解決辦法(也算是一個老生常談的問題了，記錄下來，溫故知新)：
一：將要隱藏滾動的內容加上一個包裹層div，然後給這個div設定高度為window.height() ，並且 overflow:hidden 就可以解決你的問題。
二:在標籤body上新增如下樣式。
body {
overflow:hidden;
position:fixed;
left:0;
top:0;
}