整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
phone6及iphone6plus已經出來一段時間了。很多移動端網站，以前寫死body為320px的，現在估計也忙著做適配了。
大屏幕手機其實一直有，只是以前大家沒怎么重視，移動端的H5頁面大部分都以320px為基準寬度進行布局，那些大屏屌絲android用戶也懶得去理，而現在iphone也搞起多屏幕，老板們重視程度就不一樣了。
回歸正題，兼容iphone各版本機型最佳的方式就是自適應。
1、viewport簡單粗暴的方式：
<metaname="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">
直接設置viewport為320px的1.3倍，將頁面放大1.3倍。
為什么是1.3？
目前大部分頁面都是以320px為基準的布局，而iphone6的寬度比是375/320=1.171875，iphone6+則是414/320=1.29375
那么以1.29倍也就約等于1.3了。
2、ip6+的CSSmediaquery
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
/*iphone6*/
}
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
/*iphone6plus*/
}
PS:也可以直接使用實際的device-width：如device-width:375px
在原有頁面的基礎上，再針對相應的屏幕大小單獨寫樣式做適配。
3、REM布局
REM是CSS3新增的一種單位，并且移動端的支持度很高，android2.x+，ios5+都支持。
REM是相對于dom結構的根元素來設置大小，也就是html這個元素。相較于em單位，rem使用上更容易理解及運用。
REM與PX的換算可以查看網址：https://offroadcode.com/prototypes/rem-calculator/
假設，html我們設置font-size:12px;也就是說12px相對于1rem，那么18px也就是18/12=1.5rem。
那么我們以320px的設計布局為基準，將html設置為font-size:100px，即100px=1rem。(設置100px是為了方便計算)那么可以將大部分px單位除以100就可以直接改成rem單位了。
REM如何做響應式布局？
1、如果僅僅是適配ip6+設備，那么使用mediaquery就行。
偽代碼如下：
/*320px布局*/
html{font-size:100px;}
body{font-size:0.14rem/*實際相當于14px*/}
/*iphone6*/
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
html{font-size:117.1875px;}
}
/*iphone6plus*/
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
html{font-size:129.375px;}
}
這樣，在ip6下，也就將頁面內的元素放大了1.17倍，ip6+下也就是放大了1.29倍。
2、如果是完全自適應，那么可以通過JS來控制。
(function(doc,win){
vardocEl=doc.documentElement,
resizeEvt='orientationchange'inwindow?'orientationchange':'resize',
recalc=function(){
varclientWidth=docEl.clientWidth;
if(!clientWidth)return;
docEl.style.fontSize=100*(clientWidth/320)+'px';
};
//AbortifbrowserdoesnotsupportaddEventListener
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);
頁面初始化的時候計算font-size，然后再綁定resize事件。這種效果就和百分比布局一樣了。
那么用REM做單位與百分比做單位有什么優勢？
主要優勢在于能更好的控制元素大小。（一般百分比應用在布局層，一般常見設置為50%，33.3%，25%之類的整數居多，難以運用在復雜的頁面小部件內）。
但是相比百分比布局，需要借助JS或mediaquery實現，略有一點瑕疵。
DEMO地址
4、圖片自適應
剛說完REM布局，那么用百分比布局也能實現一樣的效果，但是用百分比布局，必須要面臨一個問題：圖片寬度100%，頁面加載時會存在高度塌陷的問題。.
那么可以用padding-top設置百分比值來實現自適應。
公式如下：
padding-top=(ImageHeight/ImageWidth)*100%
原理：padding-top值為百分比時，取值是是相對于寬度的。
相關代碼實現：
<divclass="cover">
<imgsrc="http://www.jungjaehyung.com/uploadfile/2024/1012/20241012093001770.jpg"alt=""/>
</div>
.cover{position:relative;padding-top:100%;height:0;overflow:hidden;}
.coverimg{position:absolute;top:0;width:100%;}
DEMO地址，縮放瀏覽器窗口看看。
5、圖片高清化
大家都知道，iphone6plus是3倍高清圖了，它的devicePixelRatio=3。
在ios8下，已經開始支持img的srcset屬性了（目前移動端也就ios8開始支持），也就是說，可以對一張圖片設置2個URL，瀏覽器自動加載對應的圖片。
黃色表示僅支持舊的srcset規范，綠色表示支持全新的srcset規范，包括sizes屬性，w描述符。這里不展開，詳細了解可自行google。
不過目前前端這邊圖片的實現基本都用lazyload的方式實現。srcset的圖片加載方式在實際項目中運用還比較少。
6、背景圖高清化
mediaquery實現高清化
img標簽的高清化，可以通過JS判斷devicePixelRatio的值來加載不同尺寸的圖片，但是對于背景圖，寫在CSS中的，用JS來判斷就略麻煩了，還好CSS通過mediaquery也能判斷dpr。
目前兼容性最好的背景圖高清化實現方式，使用mediaquery的-webkit-min-device-pixel-ratio做判斷：
/*普通顯示屏(設備像素比例小于等于1)使用1倍的圖*/
.css{
background-image:url(img_1x.png);
}
/*高清顯示屏(設備像素比例大于等于2)使用2倍圖*/
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2){
.css{
background-image:url(img_2x.png);
}
}
/*高清顯示屏(設備像素比例大于等于3)使用3倍圖*/
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3){
.css{
background-image:url(img_3x.png);
}
}
進一步，可以通過工具生成相應的3x，2x，1x的圖片及css，在使用時直接引用即可。誰搞一個？
關于移動設備的-webkit-min-device-pixel-ratio值，可以查看該網頁的整理：http://bjango.com/articles/min-device-pixel-ratio/
image-set實現高清化
image-set，它是Webkit的私有屬性，也是Css4的一個屬性，它是為了解決Retina屏幕下的圖像顯示而生。
使用方式也很簡單。偽代碼如下：
.css{
background-image:url(1x.png);/*不支持image-set的情況下顯示*/
background:-webkit-image-set(
url(1x.png)1x,/*支持image-set的瀏覽器的[普通屏幕]下*/
url(2x.png)2x,/*支持image-set的瀏覽器的[2倍Retina屏幕]*/
url(3x.png)3x/*支持image-set的瀏覽器的[3倍Retina屏幕]*/
);
}
目前移動端的支持程度來看，ios7+，android4.4+下已經支持了。如果僅僅是做ip6+的高清適配方案。image-set也是一種實現方案。
使用image-set與mediaquery實現有什么區別及好處？
這篇文章里面做了很詳細的闡述，大家可以看看：http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/
大體的意思是：image-set不需要告訴瀏覽器使用什么圖像，而是直接提供了圖像讓瀏覽器選擇。這就意味著，如果在低網速下，瀏覽器可以選擇加載低分辨率的圖片。（PS：好智能的樣子）
但是相比如mediaquery的實現，image-set僅支持單個圖片的高清化，不適合在csssprite下使用。并且兼容性也是一大硬傷。
但是一般來說，用在LOGO區域，單個圖片圖標的區域下，也是個不錯的選擇。
7、圖片列表的自適應
關于適配，也就是要讓布局更靈活，在電商網站里面，商品列表是一個非常常見的結構。
一種比較智能的列表方式是：兩端對齊，間距自適應。
那么可以使用FLEXBOX布局來實現兩端對齊的效果，也可以使用text-align:justify的方式實現。
先看個flex實現的例子，主要通過justify-content:space-between，來實現：
flexbox的布局方式，在PC端就不合適了，ie9以下都不支持，那么更友好的方式可以使用text-align:justify來實現，兼容各大主流瀏覽器，包括IE6。
但是這2種布局方式都有一定的局限性。就是列表個數必須湊整。目前還沒找到一種能夠兼容不限個數的實現方案，如果各位看官有更好的實現方式，也歡迎提出，一起交流。
移動端ip6的適配方案有很多，沒有固定的套路及方法，請根據自身業務的特點，選擇其中的一些方法組合使用。
跨無憂（www.kuawuyou.com）來自“跨屏無憂”的想法，我們首個推出永久的、不依賴第三方的跨屏幕適配方案，希望以我們專業的力量幫助每個企業都能實現在移動互聯網的轉變，讓企業網站輕松無憂完成到移動設備的跨屏幕適配，快速抓住移動互聯網機遇。
上周五舉行的Gamer 2015大會上，白鷺引擎創始人兼CEO陳書藝先生帶來了題為《2015 觸手可及：白鷺引擎助推“手游新市場” 》的演講，對白鷺引擎2014年的工作進行了總結回顧，對業界最關心的幾個HTML5游戲相關的問題進行了解答，并通過H5游戲案例展示了H5游戲的發展現狀。
以下為演講實錄，經游戲葡萄整理發布。
大家好，為什么我要講HTML5？HTML5已經不是一個新概念了，我覺得今年它的市場才逐漸落地成熟。第一代HTML5是在PC上，但HTML5真正落地是在移動游戲市場。我認為HTML5是對游戲流量的解放，是對生產力的解放，也是對營銷及運營的解放。
65天以前，我們辦了一次HTML5大會，現場來了1350多位嘉賓。很多人因為我們受到啟發，對HTML5有了新的認識。
HTML5一直都有人關注，包括Facebook和蘋果，全世界范圍內拿到千萬美金級投資的游戲公司非常多，一直沒有出成績是因為沒有人完善和構建整個生態最后一公里的工作。白鷺引擎在2014年主要做了三個工作，第一個是白鷺引擎本身，第二個是工具鏈，第三個是標準級的產品。HTML5很復雜，但我們利用漏斗效應，把它抽象出來；利用我們的技術去封裝，把游戲的標準制定出來。
白鷺引擎的工具很好用，使得開發HTML5很簡單。我們的引擎團隊吸收了Adobe的精英，標準的技術和高效的工作流，使得開發HTML5芯片變成很簡單的事情。再加上硬件、網絡、應用場景各方面的凈化、巨大的人口紅利，HTML5游戲才變成可能。到了現在這個階段缺的是什么呢？是內容。我們現在已經有上萬的開發者，但還是缺少精品內容，所以我們依然在做最后一公里的推進工作。
上次HTML5大會之后，我們做了哪些事情呢？大會上很多人都說我們在拋概念，在忽悠。實際上這次大會以后，我們連續發布了11個產品，每個產品都已經落地。這些都是工具性的產品，而且都是雙周迭代的，在線上陪伴著我們的開發者。我們就像小米一樣，一邊更新產品，一邊跟開發者打交道，跟隨著游戲項目去雕琢這些產品。節奏非常快，每兩周就更新一個版本，我們的Runtime產品已經完成了國內渠道的集成。
在大會上，我拋出了“燈塔計劃”這個概念，主要是針對早期中小型團隊的扶持計劃，包括資本、流量、技術等方面的支持，也有針對老牌大廠商的內容。
很多人都很喜歡辯論這個話題“到底未來是屬于HTML5還是屬于APP？”其實真正好的形態是出現在移動設備上的，而所有的移動APP本身就是瀏覽器，傳統瀏覽器上的訪問流量只占不到7%。微信本身就是全世界最大的瀏覽器之一，它上面的所有內容都基于HTML5。我們認為未來是HTML5和APP相輔相成的關系，HTML5游戲有巨大的市場。HTML5游戲擁有獨特的魅力，包括跨平臺、即點即玩、超大流量、超低研發成本。無論是營銷落地的東西，還是游戲內容制作，跟我們息息相關，都給我們帶來新的機會用新的方式去營銷，用新的方式去開發游戲，用新的方式創造用戶體驗。
我們推出了Runtime這個產品。首先HTML5是一個跨平臺的技術，它的系統非常龐大，要適配不同的分辨率、瀏覽器、內核和不同的操作系統，光安卓就有十幾個版本，是極其碎片化的。其次，它的性能瓶頸使得它在目前只能做一些小游戲。再次，我們這個產品還能豐富游戲體驗，可以加強觸摸、震動、聲音，甚至是藍牙、位置等等方面的功能。大家目前看到的只是一部分，我們已經幫助國內絕大多數渠道完成了本身的生態升級。QQ瀏覽器、QQ空間、手Q、微信全部都是使用HTML5的技術進行內核的渲染，小米更是進行了整個操作系統的植入。大家可以下載最新版的獵豹瀏覽器，已經嵌入了Runtime，下圖左邊是手機游戲的嘗試，他們花了很短的時間做了一個打飛機的游戲。
我選了一部分大家會特別關心的問題。第一個問題是流量導入的形式和手段，如何快速的引流和留住用戶？簡單來說，HTML5的導流方式非常多，不僅是瀏覽器和微信朋友圈。很多人認為HTML5游戲就是微信朋友圈小游戲，而實際上朋友圈小游戲在HTML5游戲中所占的比例只有15%。
未來手機游戲操作系統的桌面、通知、WIFI停靠頁、社交軟件都是HTML5的平臺。此外還包括線下，大家在電梯里看到一個廣告，以前跟網絡沒有任何關系，現在只要掃描二維碼就可以聯網。其實引流的方式非常多，手機上所有的APP流量都可以被解放出來做導流。
第二個問題是還有哪些適合HTML5的新游戲類型。其實還有跨屏幕的體驗，不僅是手機、iPad上，電視也是屏幕，此外很多屏幕都可以運行HTML5的游戲，只要基于瀏覽器內核和云系統就可以。昨天微軟剛剛召開了Windows10的發布會，所有的系統都用一套標準。將來任何一個原生的軟件，甚至是像office這樣龐大的軟件，都可以基于我們的技術進行開發。包括XBox和掌機，都可以聯網，都可以跨平臺，都可以云通訊，都可以用HTML5這種形式
接下來給大家介紹一些案例。大家對HTML5一直停留在小游戲的印象和概念里，我今天放出一些游戲的截圖，其中有些是比較重度的游戲，有RPG，也有動作。
這個是在H5大會之后開心網做的《一統天下》，他們在海外已經做到一兩千萬的收入了。在沒有支持的情況下，他們已經可以獨立地用我們的引擎進行開發，它的原生版本以及我們會幫他們推廣的HTML5版本全部都采用我們的引擎技術，一款成熟的頁游或者是手游用白鷺引擎轉成HTML5是非常簡單的事情。
《叫我惡魔大人》是一款動作類游戲，也是重度的動作類游戲。
JJ競技非常擅長做棋牌和休閑類的游戲。這些都是他們用我們的引擎做出來的游戲。用我們的引擎可以上更多的平臺、更多的介質，甚至可以進行線下體驗。
HTML5游戲在這個階段，還不夠成熟，從吸量的角度來說，單款單渠道一天的吸量，新增是8-15萬之間，每天有3-30萬的注冊用戶。留存率還是比原生的低一些，頻率在15%左右。付費率和原生是比較接近的，大概在1.5%左右。我們現在還是比較缺少重度和經典的游戲。
再介紹一下白鷺2015年會推出的兩個東西。一個是整合的工具，可以做動畫，也可以編輯場景，也可以打包游戲。另外就是3D，未來白鷺引擎和工具會集體升級至支持3D游戲制作。引擎核心的部分已經完成，現在還在完善制作工具，希望可以使得制作一款3D的HTML5游戲變成極其簡單的事情。
2015年，我們將會同游戲葡萄聯合發布每月的HTML5游戲月度觀察，會有行業數據、每月經典案例、人物專訪和重要的行業新聞。
2月27日，借著HTML5移動游戲大會的余溫，Egret白鷺引擎在貝塔咖啡舉辦了主題為“HTML5游戲開發優化之路”第一期技術分享沙龍。繼續與開發者、運營商、渠道等行業各界一道，分享HTML5移動游戲開發實踐中的優化之道。 白鷺時代作為國內首屈一指的HTML5移動游戲開發引擎、工具與運行時提供商，其一線核心技術人員參與了本次沙龍，除此之外，還邀請了業內從事HTML5游戲領域資深人士作為嘉賓一起探討交流。沙龍中的交流與探討，匯聚了HTML5行業前景展望、Egret開發實踐、以及大家在HTML5游戲中的開發分享總結等目前行業各界關注的內容。在如此寒冷的冬季，白鷺時代為HTML5移動游戲行業點燃了一份激情。
沙龍伊始，Egret白鷺引擎聯合創始人馬鑒為大家介紹了HTML5移動游戲領域新生態。馬鑒認為，如今大型的原生游戲發展緩慢，主要在于發行模式的固化，一定程度限制了整個市場更上一層樓。開發商面對渠道和發行為王的大環境，面臨越來越艱難的選擇。而未來移動游戲的發展趨勢，應該是HTML5生態與移動App共贏的狀態?，F在眾多的開發商、發行商、渠道商都開始在這個領域大力投入，使得HTML5前景持續看俏，應用觸角更伸展至手機、平板、電視甚至可穿戴移動設備等各類連網裝置，為HTML5移動游戲市場帶來了莫大商機。
隨后，Egret白鷺引擎社區技術經理張鑫磊（A閃）為大家帶來了主題為《Egret打造高性能HTML5游戲》的分享內容。介紹了Egret白鷺引擎在本月發布的最新版本1.5中對性能優化的新功能。其中涉及到引擎的臟矩形、彈性跑道模型、模塊化編譯等相關技術。同時，借助Egret Runtime可加速Egret HTML5游戲，讓HTML5游戲在移動端擁有接近原生性能與品質。
緊接著，Egret白鷺引擎高級研發經理張晨為大家介紹了Egret最新的開發工具：Egret Wing與EgretVS。通過Egret Wing可以快速開發游戲界面，使用Egret Wing與EgretVS搭配使用可快速提高游戲開發效率，讓游戲開發變得簡單高效。
臨近沙龍尾聲，來自Egret社區的開發者代表張宇，結合他在使用Egret白鷺引擎開發游戲的一些實戰經驗進行了分享；網易前端工程師魏陽（小恐龍）通過簡單的優化技巧，包括混色，碰撞檢測，橫版適配和效率優化等，教現場的大家用HTML5做一款效率與效果并存的打飛機游戲；最后壓軸嘉賓來自HTML5游戲創業者起源天澤的CEO譚凱，帶來“Canvas優化技巧，不僅是程序的工作，更是團隊的配合，其中縮小分辨率，禁用旋轉，雙重刷新是幾個重要的優化手段，結合美術射擊來使用，會極大的提升游戲的質量和體驗”的精彩分享。
移動互聯網市場，APP派和Web分成兩大陣營爭斗已久。App素以良好的用戶體驗迅速俘獲用戶芳心，沐浴無盡恩寵。然而，原生APP受制于跨平臺開發和運行的難題，其發展的極限已經浮現，在移動游戲領域同樣如此。HTML5技術的興起，特別是白鷺時代攜引擎、工具和運行時到來，讓移動游戲擁有了面向HTML5技術轉型的基礎。
白鷺時代此前發布的全新的Egret Engine 1.5引擎，以及一系列的開發工具和運行時，不但繼續強化了HTML5移動游戲的開發服務，同時讓基于Egret Engine（白鷺引擎）開發的移動游戲，具備了媲美原生App游戲的用戶體驗。相信在不久的將來，HTML5移動游戲，與原生的App游戲，將會成為兩大主流，為廣大用戶，帶來更加多樣化，同時更具體驗感的移動游戲。
關于Egret Engine：
Egret Engine（白鷺引擎）是白鷺時代推出的一款基于TypeScript語言構建的開源免費的移動游戲引擎。通過白鷺引擎，開發者可以快速地創建可以運行在手機App的WebView或瀏覽器中的HTML5移動游戲，也可以編譯輸出成基于Android、iOS、Windows Phone的跨平臺原生移動游戲。
白鷺引擎官網：http://www.egret-labs.org/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
