2015–2016常用網頁瀏覽器、解析度大比拼(一)Desktop篇

Joy Tsai
11 min readSep 15, 2016

--

每當開始進行RWD網頁開發的時候,最令人困擾的問題就是螢幕寬度的支援程度,要怎麼讓網頁R的順順暢暢、快快樂樂(誤),倘若最小到最大的size全部都要顧及的話就太痛苦惹,(總不可能從行天宮到外太空都支援吧~~~~),不只設計師崩潰,可能連前端工程師都會暴氣不理人直接擺爛,所以有效的數據分析將各載具、各個裝置、各解析度都清清楚楚地列舉出來,再篩選出最多人使用的、最普及的,來當作一個制定的依據便是最科學的方式,因此statcounter這個網站就是我們的好朋友,還可以用來唬爛(阿不是,是說服)客戶。

在設計RWD的網站時不外乎要非常care桌上型電腦、筆電、平板、手機等個行動裝置的系統、版本、解析度等,全部一起看應該還蠻驚豔的,但礙於篇幅,我們還是一部份一部份來看吧!

以下是筆者從statcounter平台上,擷取Desktop在2015年8月到2016年8月的數據分析,那就話不多說,一起來看報表吧!

一、Desktop

在網頁設計的趨勢中,桌上型的螢幕從從前的800x600的四四方方螢幕發展到4K的高解析螢幕,還可以看3D、藍光和VR一下的超妖怪螢幕,對於網頁開發更是一大挑戰,而各系統與各瀏覽器的支援程度也是讓開發人員頭痛的問題,以下從使用者常用的系統OS、瀏覽器、瀏覽器版本,以及解析度來分析,並進一步看全球、大陸地區與台灣的差異性。

・以系統OS來看

在全球的作業系統使用狀況中,以win7的使用者最多,佔46.64%,第二是win10(14.45%),第三是win8.1(11.43%),第四是OS X(9.3%),第五則是停止提供更新的win XP(7.9%)。

statcounter所公佈的2015.8–2016.8全球Desktop系統OS使用排行榜與佔比(圖片來源/擷取自 statcounter)

另外,大陸地區的作業系統使用狀況中,同樣是以win7的使用者最多,佔52.92%,第二則是win XP(25.44%),第三是win10(8.25%),第四是win 8.1(5.23%),第五則是無法判別的系統,佔了(3.24%),OS X則跳出五名外,佔了2.21%。

statcounter所公佈的2015.8–2016.8大陸地區Desktop系統OS使用排行榜與佔比(圖片來源/擷取自 statcounter)

而在台灣的作業系統使用狀況中,以win7的使用者最多,佔50.96%,第二是win10(12.77%),第三是win XP(11.43%),第四是win 8.1(9.3%),第五則是與大陸地區相同之無法判別的系統,佔了(7.26%),OS X則跳出五名外,佔了6.88%。

statcounter所公佈的2015.8–2016.8台灣Desktop系統OS使用排行榜與佔比(圖片來源/擷取自 statcounter)

・以瀏覽器來看

在這個階段,我們來看看對開發很有影響的瀏覽器分佈表現,在全球的瀏覽器使用狀況中,以Chrome的使用量最多,佔58.89%,第二是Firefox(16.11%),第三是IE(14.72%),第四是Safari(4.62%),第五則是Opera(1.91%)。

statcounter所公佈的2015.8–2016.8全球Desktop瀏覽器使用排行榜與佔比(圖片來源/擷取自 statcounter)

另外,在大陸地區的瀏覽器使用狀況中,同樣也是以Chrome的使用量最多,佔56.58%,第二則是IE(19.97%),第三是搜狗的Sogou Explorer(7.48%),第四是Firefox(5.65%),第五則是騰訊出的QQ Browser(4.5%)。

statcounter所公佈的2015.8–2016.8大陸地區Desktop瀏覽器使用排行榜與佔比(圖片來源/擷取自 statcounter)

而在台灣的瀏覽器使用狀況中,一樣的是以Chrome的使用量最多,佔比更將近七成為67.18%,第二則是IE(19.47%),第三是Firefox(7.48%),第四是Safari(2.67%),第五則是Edge(1.91%),台灣的使用排行與全球的大徑相同,而排行第五的Edge,有讓筆者小小驚艷,有道是原來user有在更新系統吶,是件值得開心的事情。

statcounter所公佈的2015.8–2016.8台灣Desktop瀏覽器使用排行榜與佔比(圖片來源/擷取自 statcounter)

・以瀏覽器版本來看

再來這階段要來評比開發者最頭痛的瀏覽器版本的部分,首先,在全球的使用狀況上,最多的使用的瀏覽器版本則與瀏覽器的分析狀況有所不同,佔據第一的是其他版本的瀏覽器佔34.83%,第二為IE 11.0,佔10.23%,第三為Chrome 46(7.24%),第四為Chrome 49(6.74%),第五為Chrome 45(6.24%),第六、七、八、九也都還是Chrome的各版本,可見Chrome在全球的使用量真的很龐大,而多數的開發者也較喜愛使用Chrome來進行測試,在開發時,就需特別注意在各瀏覽器與各版本的相容性了。

statcounter所公佈的2015.8–2016.8全球Desktop瀏覽器版本使用排行榜與佔比(圖片來源/擷取自 statcounter)

另外,在大陸地區使用的瀏覽器版本中,佔據第一的與全球的數據相同,也是其他版本的瀏覽器佔26.27%,第二的是Chrome 31.0,佔20.43%是較為舊的版本,第三的是Chrome 45(13.75%),與第二的版本差差異相當的大,第四為IE 8.0(8.03%),第五為Sogou Explorer(7.48%),第六則是Chrome 44(6.15%),第七第吧分別是IE 11.0(5.65%)、IE 9.0(3.21%),與全球的使用趨勢相比,雖然也相同是Chrome的使用量較多,但版本差異大,且其他的瀏覽器的使用者也佔有一定的比例,因此,在做開發測試的時候相對的要花相當多的時間去檢測。

statcounter所公佈的2015.8–2016.8大陸地區Desktop瀏覽器版本使用排行榜與佔比(圖片來源/擷取自 statcounter)

再來是台灣的使用趨勢,最多人使用的版本一樣是其他版本,佔19.66%,第二則是IE 11,佔了12.71%,而三到十皆是Chrome的46–51版本拿下,其中還包含了Android的Deaktop OS,讓筆者相當的驚喜,台灣人使用平板筆電仍有一定的佔比,而IE 11的使用者仍然佔相當龐大的數量。

statcounter所公佈的2015.8–2016.8台灣Desktop瀏覽器版本使用排行榜與佔比(圖片來源/擷取自 statcounter)

・以螢幕解析來看

再來是重頭戲解析度的數據,最關乎畫面完整的呈現的解析度數據,筆者看到這樣的數據表現時,內心是頗受安慰的,至少在設計時開啟的畫布有走在時代尖端(燦笑)。

首先,在全球表現最為突出的解析度是1366x768佔30.44%,其次是,其他解析也還佔有16.93%(到底有多少妖怪尺寸的螢幕吶),第三是1920x1080(12.84%),第四1024x768(7.15%),第五1440x900(6.21%),在全球的表現來看,高解析的螢幕解析,慢慢是個趨勢,也可看出這兩年的網頁設計風格走向,也蠻合乎這樣的數據呈現,從滿版的圖片、影片與一頁式網頁的流行來看,高解析的螢幕尺寸,更注重在畫面上的呈現。

statcounter所公佈的2015.8–2016.8全球Desktop螢幕解析使用排行榜與佔比(圖片來源/擷取自 statcounter)

再來一起來看看大陸地區使用的螢幕解析度表現,拿下第一的一樣是1366x768佔25.85%,第二則是1920x108也有22.82%蠻不錯的表現,第三第四則是其他解析(12.84%)與1440x900(12.42)不相上下,第五為1024x768(6.57%),而在大陸地區的表現來看,大陸地區的螢幕解析都算是蠻有水準的,高解析的佔比也都還佔有一定的比例。

statcounter所公佈的2015.8–2016.8大陸Desktop螢幕解析使用排行榜與佔比(圖片來源/擷取自 statcounter)

最後來看看咱們台灣的朋友們,在螢幕解析的表現是否有走在時代尖端,從圖表來看1920x1080以24.44%奪冠,第二為其他解析(20.09%),第三是1366(16.54%),第四1440x900(7.31%),第五是1024x768(6.59%),在這樣的數據表現來看,1920x1080為台灣的主流解析,在設計上就需特別注意畫面的配置與圖片解析的支援程度,在這樣的表現,還算表現的蠻不錯的,可見慢慢高解析度的網頁在台灣已經慢慢是趨勢。

statcounter所公佈的2015.8–2016.8台灣Desktop螢幕解析使用排行榜與佔比(圖片來源/擷取自 statcounter)

整體來看,就電腦系統而言win 7仍然是主流,其次是win 10&win XP,而OS X仍佔有一定的比例,但就整體而言不算太多(但怎麼筆者感覺到身邊真的非常多人使用Mac在開發啊啊啊啊啊)。

而在瀏覽器的使用上以Chrome使用量佔大多數,IE 與 Firefox緊追在後,在大陸地區還有搜狗、QQ瀏覽器佔一小部分,台灣則是Safari也有一定的小眾市場,我們還是逃離不了IE開發,需要建構好打怪練功打魔王的技能吶(菸)。

另外在瀏覽器版本的部分以其他瀏覽器版本最多,因為沒有詳細的數據呈現,在此就不深入去探討是哪些版本,除此之外,以數據上呈現的狀態下,多數人使用的有IE 11 8 , Chorme 31 45 46 47 49 51等版本,版本的差異相當的大,因此在使用Chrome開發時,要特別去注意到版本的相容性,而在IE 的開發下,也要特別去注意到CSS的使用,魔王級的IE 8還在榜內,我想許多開發者應該也是感到非常無奈吧(只少本魯就是)。

最後是螢幕解析主流的為1366x768 , 1920x1080,其次為1440x900與1024x768,高解析的螢幕尺寸已慢慢地深入我們的生活中,想信在未來的使用上,1024的螢幕解析會慢慢被淘汰,越來越高解析的螢幕會慢慢浮出數據的表現中,無論在設計或開發,慢慢的支援度也要提升,而設計的風格也能因應解析度的提高做更多不一樣的設計,且在heroimage的使用上就更要注意到解析度的支援與圖片的質感,版面的配置上就更要注意空間感,字體的配置上就更要針對每個解析度去進行微調,對設計師來說,因為空間變大了對畫面的配置就變得更為敏版了。

以上是這一次針對Desktop 透過作業系統、瀏覽器、瀏覽器版本、螢幕解析來做分析,下一部份則是會針對平板、手機裝置來做相同的剖析。

關於筆者的大小事......

Hi, I'm Joy,現為某軟體接案公司的各種打怪練功Designer,從事APP、網頁、動畫、平面……等等設計,sometimes還需要跟客戶PK,幫PM 大大們解決需要用設計trouble shooting的部分。

--

--