H5常用代碼:適配方案1


在工作中接到H5項目,第一件想到的事就應該是屏幕適配問題,解決了屏幕適配,接下來的事才能真正開始。從此篇博客開始會連續記錄下我經常用到的一些適配方案。

對於傳統的PC項目,直接在移動端打開也都是會以視口980來自動縮放以顯示主內容在屏幕內,既然有這么個特性,那自然適配也就可以通過通過控制視口來達到適配的目地。

以下是我工作中經常用到的第一種移動端適配方案:

<!DOCTYPE html>
<html>
<head>
<title>適配方案1</title>
<meta charset="utf-8">
<meta content="width=640,user-scalable=no,target-densitydpi=device-dpi" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
    <style>
        body{
            margin:0;
        }
        .wrap{
            width:640px;
            overflow:hidden;
            line-height:36px;
            font-size:24px;
        }
        .aside_left,.aside_right{
            width:320px;
            height:160px;
            float:left;
            color:white;
            line-height:160px;
            font-size:30px;
            text-align:center;
        }
        .aside_con{
            width:640px;
            height:160px;
            background:blue;
            color:white;
            line-height:160px;
            font-size:30px;
            text-align:center;
        }
        .aside_left{
            background:red;
        }
        .aside_right{
            background:green;
        }

    </style>
</head>
<body>
    <div id="wrap" class="wrap">

        <!--示范結構 S-->
        <div class="aside_con">
            <div class="aside_left">示范塊內容0</div>
            <div class="aside_right">示范塊內容1</div>
        </div>
        <div class="aside_con">整條示范內容2</div>
        <!--示范結構 E-->

    </div>
</body>
</html>

 適配說明:

1:它使用了viewport視口的特性,手機會保證內容在一個視口內顯示,把視口設計成你設計稿的寬度,如當你設計稿是640的時候你就按640PX寬來布局,如果是750的你就按750PX來布局,里面全用像素單位,回歸到了PC的像素單位時代
2:主要的適合用在一些移動端的活動宣傳頁,要求上線快,下的也快的那些頁面,即保證了速度也保證了開發成本,用來做功能頁也是問題不大的
3:有一定的兼容風險,如果只是在微信里用的,這種適配方式就是你的菜,如果要兼容安卓低版本的一些手機原生瀏覽器,那這種適配方式不太適合。

我有遇到的一個場景是:公司的宣傳頁不但要放在微信里宣傳,而且還要內嵌放到安卓APP里宣傳,而安卓APP是調用手機的默認瀏覽器的,
雖然target-densitydpi=device-dpi是來解決安卓低版本兼容的,但是還是會有一些小差距,並不能保證內容在一屏寬度內,而且瀏覽器還能手動縮放,
當時不得已修改方案,考慮到修改的大小,后面使用適配方案2來解決的

以上代碼歸屬於我的github常用H5代碼整理項目(詳見其中adaptationMode/mode1/index.html):https://github.com/xw5/mobile-code/

如果要做整屏切換效果,需要做一些CSS配合

代碼如下:

<!DOCTYPE html>
<html>
<head>
<title>適配方案1全屏</title>    
<meta charset="utf-8">
<meta content="width=640,user-scalable=no,target-densitydpi=device-dpi" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
    <style>
        /* 整屏適配必須需要的樣式 S*/
        html,body{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .wrap{
            width:640px;
            height:100%;
            overflow:hidden;
            background:url(bg.jpg) no-repeat center 0;
            -webkit-background-size:cover;
            background-size:cover;
        }
        /*整屏適配必須需要的樣式 E*/
        *{
          margin:0;
          padding:0; 
        }
        .wrap{
           line-height:36px;
            font-size:24px; 
            color:#fff;
        }
        .aside_left,.aside_right{
            width:320px;
            height:160px;
            float:left;
            color:white;
            line-height:160px;
            font-size:30px;
            text-align:center;
        }
        .aside_con{
            width:640px;
            height:160px;
            background:blue;
            color:white;
            line-height:160px;
            font-size:30px;
            text-align:center;
        }
        .aside_left{
            background:red;
        }
        .aside_right{
            background:green;
        }
    </style>
</head>
    <body>
     <div id="wrap" class="wrap">

        <!--示范結構 S-->
        <div class="aside_con">
            <div class="aside_left">示范塊內容0</div>
            <div class="aside_right">示范塊內容1</div>
        </div>
        <!--示范結構 E-->

    </div>
</body>
</html>

整屏適配說明:

此處是常用的專題頁整屏適配,整屏的話需要設置html,body{width:100%;height:100%;oveflow:hidden;}去掉X&Y方向滾動條,同時通過把背景大小設置為background-size:cover;來保證背景占滿整屏,同時使用background-position:center 0;來保證背景居中,左右裁剪,背景本身是裝飾裁剪也無大礙的,此適配的需要把主內容盡可能的居中,以避免被裁剪掉

 

以上代碼歸屬於我的github常用H5代碼整理項目(詳見其中adaptationMode/mode1/fullscreen.html):https://github.com/xw5/mobile-code/

歡迎clone,歡迎star,一起學習,一起進步!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM