在微信瀏覽器中，分享彈窗高度適配，原理就是使彈窗高度由內容撐開，主要應用於分享內容為一張很長的圖片時，當圖片過長，在小屏手機上顯示不完全時，等比縮小一定尺寸使其能完全顯示，大屏手機則按照原圖尺寸顯示。

效果圖如下：

實現過程如下：

1. html結構

<section v-show="isShare" class="canvas_share">
    <div class="share_wrap">
        <div id="canvas_area" class="top">
            <img class="share_bg"
 
 :src="groupInfo.sharePic" alt="">
            <img class="share_code" :src="qcode" alt="">
            <p>識別二維碼，馬上拼團</p>
        </div>
        <div class="bottom">
            <span>長按保存圖片，分享好友參團</span>
            <img @click="closeShare" src="<?= $staticUrl.‘images/group/close.png‘ ?>"
 
 alt="">
        </div>
    </div>
</section>

2. css樣式

.canvas_share {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 20;
    .share_wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform
 
: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        .top {
            width: 100%;
            height: 86%;
            position: relative;
            img.share_bg {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }
            img.share_code {
                position: absolute;
                bottom: 7.8%;
                right: -6%;
                width: 54px;
                height: 54px;
                -webkit-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                -o-transform: translateX(-50%);
                transform: translateX(-50%);
            }
            p {
                position: absolute;
                bottom: 2%;
                right: 4%;
                color: @color-white;
            }
        }
        .bottom {
            width: 100%;
            height: 14%;
            text-align: center;
            span {
                display: inline-block;
                color: @color-white;
                font-size: .15rem;
                font-weight: bolder;
                margin-top: .2rem;
            }
            img {
                float: right;
                width: .3rem;
                height: .75rem;
            }
        }
    }
}

3. js邏輯

以iphone6為基準，以下描述均已px為單位，設備物理像素高667*2，微信瀏覽器頭部導航32*2，現設計稿要求彈窗內容為：頭部分享圖+bottom關閉按鈕，總高度為1000+150=1150，我們需要計算兩個比例，C1 = 彈窗總高度 /（設備物理像素高-微信瀏覽器頭部導航高度）; C2 = 彈窗總寬度 / 彈窗總高度，則適配邏輯如下：

var windowHeight = $(window).height(), shareWrapHeight, shareWrapWidth;
if (windowHeight > 彈窗總高度/2) {
    shareWrapHeight = 彈窗總高度/2 * C1;
    shareWrapWidth = 彈窗總高度/2 * C1 * C2;
} else {
    shareWrapHeight = windowHeight * C1;
    shareWrapWidth = windowHeight * C1 * C2;
}
$(‘.share_wrap‘).css({
    "width": shareWrapWidth + "px",
    "height": shareWrapHeight + "px"
})

微信瀏覽器中彈窗高度適配