純canvas頁面自適應(yīng)方法

var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
function stageBreakHandler(event)
{
    if(stageWidth!=document.documentElement.clientWidth||stageHeight!= document.documentElement.clientHeight)
    {
        stageWidth =  document.documentElement.clientWidth;
        stageHeight = document.documentElement.clientHeight;
        //外部元素自適應(yīng)
        canvas.width = stageWidth ;
        canvas.height = stageHeight;
 
        //內(nèi)部元素自適應(yīng)
        stageScale = stageWidth/750;//寬度自適應(yīng)；
//    stageScale = stageHeight/1206;//高度自適應(yīng)兩者選一
        container.scaleX = stageScale;
        container.scaleY = stageScale;
//    bitmap.x = (stageWidth -  750*bitmap.scaleX)/2;//高度自適應(yīng)時(shí)解開這個(gè)注釋 保證圖片居中
        if(leftBtn)
        {
            leftBtn.x = stageWidth - 100;
        }
    }
    stage.update();
}

注意：上面代碼的750和1206是素材的大小不是屏幕的大小，也就是你自適應(yīng)的素材有多大就寫多大

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容