在工作中接到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,一起學習,一起進步!