Pc端使用平臺：QQ瀏覽器9.0（2315）Chromium43.0.2357.124 \ IE9.0.8112.16421
手機端使用平臺：紅米2增強版 自帶瀏覽器MIUI6.6.2.0（KHJCNCF）|穩(wěn)定版
在手機端訪問產品的官網(wǎng)陶衅，大概會有以下幾種形式：
1)無適配锈遥。無適配不僅僅是布局和內容沒有做適配悲龟，交互動作也沒有做適配偷厦。原本為pc端設計的網(wǎng)頁在手機端往往會縮小剃诅，然后變形掉房，大部分操作會失效绑莺。
2)極簡適配苫昌。極簡適配就是又想做適配蔓姚，又因為其他種種原因捕虽，所以對內容進行刪減直到剩下最后一個頁面，用一個頁面去呈現(xiàn)最基本的產品介紹以及下載按鈕坡脐。
3)適配泄私。做了適配的官網(wǎng)會在手機端有良好的表現(xiàn)。當然，Pc端的官網(wǎng)有時候體量太大晌端，在適配到手機端的時候會有刪減捅暴。
下面可以先看看這三種情況大概是什么樣子。
以上是QQ瀏覽器的官網(wǎng)（browser.qq.com）咧纠，可以看到蓬痒，在手機端，內容被擠壓到中間偏左的地方漆羔，已經變形了梧奢。同時，在pc端時演痒，網(wǎng)頁的操作是“鼠標滾輪滾動切換頁面”亲轨，映射到手機端應該就是“滑動頁面切換頁面”，但是交互動作也失效了鸟顺。
原因：
QQ瀏覽器沒有做適配的原因非常簡單瓶埋，就是因為這是一個pc產品的官網(wǎng)。用戶用手機訪問該官網(wǎng)的場景幾乎不存在诊沪，所以不做適配也無可厚非养筒。
只是，即使不適配端姚，那么是否有更好的方式去避免這種問題晕粪。既然手機端訪問pc產品官網(wǎng)可能性極小，同時體驗這么差渐裸，能否嘗試強制跳轉到手機版的官網(wǎng)呢巫湘？這樣子或許會更好吧。
以上是kingroot的官網(wǎng)（www.kingroot.net）昏鹃，可以看到尚氛，該頁面的變形和QQ瀏覽器的官網(wǎng)很相似。都是內容的錯位以及交互動作的失效洞渤。
原因：
Kingroot官網(wǎng)沒有做適配的原因可能和QQ瀏覽器有點類似阅嘶，但是又不盡相同。雖然可能同是出于訪問量極少的原因载迄，但是不同的是讯柔，手機端下載的渠道幾乎都是應用分發(fā)平臺，用戶去官網(wǎng)下載的概率比較小护昧。所以魂迄，評估一下產出和收益，就不做了吧惋耙。
以上是騰訊手機管家的官網(wǎng)（m.qq.com）捣炬，可以看到熊昌，手機管家的手機端和pc端完全不是同一個東西，pc端的內容大而全湿酸，手機端只保留最基本的產品宣傳介紹的東西婿屹。
原因：
1)定位不同；
騰訊手機管家這么做得原因稿械，可能是出于產品定位的考慮，即：pc端和手機端的官網(wǎng)定位不同冲粤。
PC端官網(wǎng)的定位可能更多以“平臺”為主美莫，所以我們可以看到，官網(wǎng)上面宣傳的內容相對比較少梯捕，更大的篇幅是讓位給了其他各種功能厢呵，比如說首頁就可以看到的：“WiFi開放平臺”、“號碼公眾平臺”傀顾、“惡意線索舉報”以及“在線查毒”襟铭。
手機端的官網(wǎng)定位以“產品介紹”為主，所以頁面只要把騰訊手機管家的亮點秀出來短曾、然后附上下載鏈接即可寒砖。
2)手機網(wǎng)速慢；
同時嫉拐，手機端本身有訪問網(wǎng)速慢哩都。所以需要對展示的內容進行重新篩選，因此會刪除大量用戶需要的信息婉徘。
3)手機屏幕比較心丁；
最后保留下來的信息需要考慮頁面大小的問題盖呼，剩下的信息需要重新排版以符合手機端的顯示效果儒鹿。
4)手機端訪問量小几晤；
訪問量小只是一個補充的因素约炎，因為訪問量小，所以即使刪減信息也沒有關系蟹瘾，畢竟影響的范圍小章钾。
以上就是360極客版的官網(wǎng)（http://geek.#），從圖片可以看到热芹，PC端和移動端的區(qū)別除了在頁面布局上的區(qū)別外贱傀，更大的區(qū)別實際上是信息架構的區(qū)別。PC端的信息架構更加復雜伊脓，而手機端只保留了最基本的“產品宣傳”以及“下載”功能府寒。同時魁衙，在PC端首頁的圖片變成了手機端的文字（詳情請訪問該網(wǎng)頁）。
原因：
360極客版的官網(wǎng)并沒有定位的問題株搔，更多的是出于對手機端適配的考慮剖淀。
1)手機網(wǎng)速慢；
手機端本身有訪問網(wǎng)速慢纤房。所以需要對展示的內容進行重新篩選纵隔，因此會刪除大量用戶需要的信息。
2)手機屏幕比較信谝獭捌刮；
最后保留下來的信息需要考慮頁面大小的問題，剩下的信息需要重新排版以符合手機端的顯示效果舒岸。
3)手機端訪問量猩鹱鳌；
訪問量小只是一個補充的因素蛾派，因為訪問量小俄认，所以即使刪減信息也沒有關系，畢竟影響的范圍小洪乍。
說明：“適配”和“極簡適配”區(qū)別只是信息的不同眯杏。“適配”保留的信息會更多壳澳，“極簡適配”保留的信息較少役拴，兩者并沒有什么明顯的界限。至于信息保留的多少钾埂，應該以產品的定位為準河闰。
以上獵豹清理大師的官網(wǎng)（http://cn.cmcm.com/cleanmaster/）∪熳希可以看到姜性，兩者在信息架構上沒有區(qū)別，同時髓考，對內容進行了重新排布以適應手機端的屏幕部念。更重要的是，獵豹清理大師的官網(wǎng)有對交互動作進行了適配氨菇。在PC端儡炼，首頁的內容是滾動鼠標滾輪一次，頁面切換一次查蓉。在手機端映射為乌询，每滑動一次屏幕，屏幕切換一次豌研。在這點上妹田，PC端和手機端體驗非常一致唬党。
原因：
1)手機網(wǎng)速慢；
手機端本身有訪問網(wǎng)速慢鬼佣。但是在頁面信息本來就不多的情況下驶拱，內容可以根據(jù)產品定位進行取舍。
2)手機屏幕比較芯е浴蓝纲；
保留下來的信息需要考慮頁面大小的問題，剩下的信息需要重新排版以符合手機端的顯示效果晌纫。
3)精益求精税迷；
即使手機端訪問的量少，也需要為每一個用戶提供最滿意的體驗缸匪。
是否進行適配翁狐，以及怎么適配类溢，可以參考以下的一些點凌蔬。
所有的產品在設計的時候都離不開定位的問題，網(wǎng)站的設計也一樣闯冷。特別是在PC端網(wǎng)頁已經存在的情況下砂心，定位的問題更加要思考清楚。
PC端的官網(wǎng)暫時就定位為兩種：產品介紹類和平臺類蛇耀。
可以這么說辩诞，每個產品的官網(wǎng)在初期都是產品介紹類，因為這時候纺涤，官網(wǎng)的作用更多的是以介紹宣傳為主译暂，可能附帶有下載的功能。
隨著產品的成長撩炊，用戶人數(shù)增加外永，可能每個產品或多或少都有做平臺的野性，對于一些有條件的產品拧咳，其官網(wǎng)會逐漸演變成平臺類的官網(wǎng)伯顶，這時候，官網(wǎng)的宣傳作用就處于較低的地位骆膝，更多時候祭衩，官網(wǎng)是提供服務的入口。
兩種不同類型的PC官網(wǎng)在做手機端適配的問題阅签，考慮的問題都是一樣的掐暮，就是，手機端的官網(wǎng)的定位如何政钟。一般而言劫乱，手機端由于屏幕以及網(wǎng)絡的原因织中，做成平臺類的不太現(xiàn)實。但是衷戈，手機端的官網(wǎng)依舊可以保留必要的功能入口狭吼。
不過，手機端官網(wǎng)的定位更多的是考慮其與PC端怎么樣配合工作殖妇。
a)最理想的狀況是“分工合作”刁笙。比如說：手機端可以快捷獲取到手機號等個人信息、有豐富傳感器谦趣、可以隨時隨地推送通知疲吸；PC端有足夠的空間展示信息、鍵盤鼠標輸入非常便捷前鹅。發(fā)揮兩個平臺不同的優(yōu)勢去設計摘悴。然而，這只是理想狀況舰绘，目前還沒有發(fā)現(xiàn)此類網(wǎng)頁設計蹂喻。
b)最省力的狀況是“照搬全抄”。即兩個平臺的網(wǎng)頁信息架構相同捂寿，改變的只有頁面布局以及交互方式口四，比如獵豹清理大師的網(wǎng)頁。這種情況很好地保證了體驗的一致性秦陋，但是只適合信息架構比較小的網(wǎng)頁蔓彩，所以在大部分情況下可能不適用。
c)最明智的狀況是“因地制宜”驳概。即結合以上兩種赤嚼，既允許兩個平臺有功能的重疊，也保證有各自的特色顺又。不過更卒，鑒于是官網(wǎng)的設計，所以更多情況下待榔，手機端的網(wǎng)頁只是PC端網(wǎng)頁的一個mini版逞壁。
網(wǎng)頁中，文字是常見的元素锐锣。初次之外腌闯，還會有諸如圖片、視頻雕憔、音樂姿骏、程序或者鏈接等超文本的元素。
對于這些內容是否要呈現(xiàn)在手機端的網(wǎng)頁斤彼，可以進行如下的思考：
針對這些元素分瘦，我個人給出的建議如下（有不同意見的歡迎在評論處拍磚）：
在對網(wǎng)頁上的一些布局進行適配的時候蘸泻，可以考慮用以下的原則。
3.3.1.簡化
簡化嘲玫，刪繁就簡悦施，把一些重復表達的東西精簡掉。
以上是網(wǎng)站http://www.axt.es/#/works在pc端和手機端的對比圖去团，可以看到抡诞，在pc端時，品牌logo旁邊還有一句宣傳語土陪，但是在手機版的時候已經精簡掉了昼汗。
以上是網(wǎng)站http://tympanus.net/Blueprints/FullWidthTabs/在pc端和手機端的對比圖，可以看到鬼雀，在pc端時顷窒，tab欄是圖案加文字的形式，但是在手機版的時候已經被簡化到只剩下圖案源哩。需要注意到的是鞋吉，如果簡化掉的是圖案而不是文字的話，手機端是容納不下那么多的tab欄目的璧疗。
3.3.2.重組
重組坯辩，重新組合馁龟。主要是針對頁面的內容部分崩侠，重新組合，以適應頁面坷檩。
以上獵豹清理大師的官網(wǎng)（http://cn.cmcm.com/cleanmaster/）却音。重組之前可以先對頁面顯示的內容進行分塊，比如上圖矢炼，pc端的內容可以分成兩塊系瓢。分塊之后，原本兩個方塊的布局是一左一右句灌，在手機端的時候就可以變成一上一下夷陋。
更多的時候，pc網(wǎng)頁可能同時在橫向會有很多方塊胰锌。這時候可以通過頁面的寬度調整橫向排列的方塊的數(shù)量骗绕。如下圖：
3.3.3.隱藏
某些導航欄的tab欄可以考慮使用Material design的漢堡菜單，將導航收起來资昧，把更多的位置留給內容展示酬土。
以上是https://futureofwebdesign.com/london-2013/在手機和電影的對比圖。pc端的導航tab在手機端被隱藏起來了格带，變成了側邊欄撤缴，這樣就可以把主要的區(qū)域用于內容的展示刹枉。
在確定好手機端網(wǎng)頁內容以及頁面布局之后，需要考慮交互動作的適配屈呕。下面是我總結的一些交互動作在PC端和手機端的映射微宝，僅供參考。
4.小結
官網(wǎng)是否在手機端進行適配虎眨，除了產品本身的環(huán)境（PC端還是手機端）之外芥吟，還要考慮成本和收益的問題。不過總歸专甩，適配能給用戶更好的體驗钟鸵。
而適配，可以從三個維度：內容涤躲、布局和交互方式三種去適配棺耍。
如果只是考慮在PC端網(wǎng)頁大小的適配的話，只考慮布局就足夠了种樱。
