PC網(wǎng)站自動適配手機網(wǎng)頁的方法技巧
時間：2022-05-28 11:24:01 | 來源：網(wǎng)絡營銷
時間：2022-05-28 11:24:01 來源：網(wǎng)絡營銷
隨著智能手機的不斷發(fā)展，移動搜索的比例也在不斷增加，而傳統(tǒng)的PC站點在手機端的用戶體驗度較差，這就容易流失大量的用戶，所以做一個對應的手機站就理所當然。
如今，手機站已經(jīng)逐漸成為一種潮流，基本上有點規(guī)模的PC站點都會制作相應的手機站，可是在很多方面依然存在一定的難題，例如PC站和手機站的內(nèi)容如何適配才能在移動搜索占據(jù)較好的排名呢？哪種方式的流量轉(zhuǎn)換更利于用戶體驗呢？
一、PC網(wǎng)站自動適配手機網(wǎng)頁的7個步驟 一般來說，移動適配主要通過底層的web技術(shù)開發(fā)手段來完成，下面億企邦將通過移動適配技術(shù)的角度來告訴你通過7個步驟來完成一個PC網(wǎng)站向移動設(shè)備的跳躍！
1、允許網(wǎng)頁寬度自動調(diào)整 “自適應網(wǎng)頁設(shè)計”到底是怎么做到的？其實并不難。
首先，在網(wǎng)頁代碼的頭部，加入一行viewport元標簽，viewport是網(wǎng)頁默認的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設(shè)置，包括IE9，對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用絕對寬度 由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素，這一條非常重要。
具體說，CSS代碼不能指定像素寬度：width:xxxpx;
只能指定百分比寬度：width:xx%;或者width:auto;
3、相對大小的字體 字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body{
font:normal100%Helvetica,Arial,sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1{
font-size:1.5em;
}
然后，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small{
font-size:0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
4、流動布局（fluidgrid） “流動布局”的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。
.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)。
另外，絕對定位（position:absolute）的使用，也要非常小心。
5、選擇加載CSS “自適應網(wǎng)頁設(shè)計”的核心就是CSS3引入的MediaQuery模塊，它的意思就是，自動探測屏幕寬度，然后加載相應的CSS文件。
media=”screenand(max-device-width:400px)”
href=”tinyScreen.css”/>
上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width:400px），就加載tinyScreen.css文件。
media=”screenand(min-width:400px)and(max-device-width:600px)”
href=”smallScreen.css”/>
如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。
除了用html標簽加載CSS文件，還可以在現(xiàn)有CSS文件中加載。
6、CSS的@media規(guī)則 同一個CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應用不同的CSS規(guī)則。
@mediascreenand(max-device-width:400px){
.column{
float:none;
width:auto;
}
#sidebar{
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小于400像素，則column塊取消浮動（float:none）、寬度自動調(diào)節(jié)（width:auto），sidebar塊不顯示（display:none）。
7、圖片的自適應（fluidimage） 除了布局和文本，自適應網(wǎng)頁設(shè)計還必須實現(xiàn)圖片的自動縮放。
這只要一行CSS代碼：
img{max-width:100%;}
這行代碼對于大多數(shù)嵌入網(wǎng)頁的視頻也有效，所以可以寫成：
img,object{max-width:100%;}
老版本的IE不支持max-width，所以只好寫成：
img{width:100%;}
此外，windows平臺縮放圖片時，可能出現(xiàn)圖像失真現(xiàn)象。這時，可以嘗試使用IE的專有命令：
img{-ms-interpolation-mode:bicubic;}
或者，EthanMarcotte的imgSizer.js。
addLoadEvent(function(){
varimgs=document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
});
最好還是做適配分辨率的圖片，有很多方法可以做到同樣效果，服務器端和客戶端都可以實現(xiàn)（具體可查看億企邦《根據(jù)訪問設(shè)備自動識別展示手機站或PC站的方法》的相關(guān)介紹）。
二、適配最常見的操作方法 據(jù)億企邦觀察，PC站和手機站匹配最常用的幾種方法是移動適配、JS跳轉(zhuǎn)、Meta聲明、302規(guī)則等等，由于每種方法的操作方式不同，產(chǎn)生的效果也不同，具體的優(yōu)缺點也需要區(qū)別對待，在此，億企邦就給大家比較一下這4種適配方法的優(yōu)缺點以及需要注意的地方：
1、移動適配 現(xiàn)在很多搜索引擎都提供移動適配的功能，例如百度的開放適配和360的移動適配，利用百度站長工具提交PC頁-手機頁對應關(guān)系Sitemap，或者利用360站長工具提交PC頁-手機頁對應關(guān)系txt就能實現(xiàn)PC站內(nèi)容和手機站一一適配。
這樣做的優(yōu)點是只需要在搜索引擎工具提交資料，無需對站點本事做改動，而且網(wǎng)站內(nèi)容一一對應，并不只局限于網(wǎng)站首頁。
缺點就是只能在百度或者360移動搜索中生效，其他沒用提交適配文件的搜索中就無效了。
2、JS跳轉(zhuǎn) JS跳轉(zhuǎn)對于某些行業(yè)來說有著重要的作用，尤其是對于用戶轉(zhuǎn)換率網(wǎng)站首頁較高的網(wǎng)站，只需要在網(wǎng)站的頭部加一段JS代碼判定是否是移動端訪問，然后所有的流量就會全部流向手機站的主頁。
JS跳轉(zhuǎn)的優(yōu)點是適用于所以的移動搜索，并不局限于百度和360，可以提高用戶的轉(zhuǎn)換率。
缺點是難以實現(xiàn)每個頁面的一一對應，而且容易被某些搜索引擎判定作弊，從而受到懲罰。
3、Meta聲明 Meta聲明的格式一般為，站長可以將這段代碼加在PC站的頭部，由Meta信息來指明該PC頁對應的手機頁的URL，以及該URL對應頁面的格式。
Meta聲明的優(yōu)點是代碼簡單易懂，操作方便。
缺點是只能在百度移動搜索中生效，對于其他搜索引擎無效（另外，還可以使用百度轉(zhuǎn)碼，具體可查看億企邦《百度轉(zhuǎn)碼后的手機網(wǎng)站頁面是否有利于SEO優(yōu)化》的相關(guān)介紹）。
4、302規(guī)則 302規(guī)則指的是，當判定移動端訪問網(wǎng)站時，302臨時跳轉(zhuǎn)到一個網(wǎng)址(手機站)，例如可以在htaccess文件里加上一段判定手機的代碼，做個302重定向。
這樣做的好處是，不需要再額外在網(wǎng)站的前端代碼中加任何東西，也不需要向搜索引擎提交規(guī)則，可是據(jù)億企邦測試，有可能會導致PC站被降權(quán)。
雖然302是暫時性的重定向，但過于頻繁的302是很有可能給網(wǎng)站帶來不利的影響的，具體的尺度需要站長自己去把握。
以上4種適配方法是億企邦接觸的最為常見的操作方法，通常PC站做了以上處理后，一段時間以后移動端搜索出來的結(jié)果，下面匹配的網(wǎng)址就變成了移動站網(wǎng)址，不過標題還是PC站標題。
至于到底哪種方法更好，億企邦更傾向于第一種，畢竟百度移動搜索占據(jù)著網(wǎng)站的大部分流量，而且用戶體驗度也最好。
三、百度開放適配服務的3種方案 百度站長平臺對移動適配方面的東西這么定義：為了提升用戶的移動搜索結(jié)果瀏覽體驗，百度移動搜索對具有對應手機站的PC站提供“開放適配”服務。如果您同時擁有PC站和手機站，且二者能夠在內(nèi)容上對應，您可向百度“提交”PC頁—手機頁的對應關(guān)系，若對應關(guān)系準確，將有助于百度在移動搜索中將原PC頁結(jié)果替換為對應的手機頁結(jié)果。積極的參與“開放適配”，將有助于您的手機站在百度移動搜索獲得更好的展現(xiàn)，同時以更佳的瀏覽效果贏取用戶口碑。
百度開放適配服務共提供三種方案——自主適配、標注Meta聲明、提交對應關(guān)系Sitemap，同時向站點提供開放適配進度查詢（具體可查看億企邦《百度移動搜索開放適配服務的3種方法》的相關(guān)介紹）。
可能大家對標注meta聲明和提交對應關(guān)系的sitemap這一項比較熟悉，另外對自主適配這個的理解僅限于使用百度的siteapp這個東西上面，因為當時我們的網(wǎng)站是在原有的PC站點上，做了一個對應的手機站，這個手機站是單獨存在的。
而在移動設(shè)備上搜素到的我們的網(wǎng)站都是PC端的形式，我們不想用百度的自動轉(zhuǎn)碼，只是想標注meta進行判斷，判斷成功后進行跳轉(zhuǎn)，而我當時的需求就是要這個跳轉(zhuǎn)代碼，可能大家知道的跳轉(zhuǎn)代碼有很多，但是我當時想要的是符合百度或者搜索引擎對移動站點適配這個前提有一定的接受能力的跳轉(zhuǎn)方式，而不是簡單的做個跳轉(zhuǎn)，做SEO的都懂得。
億企邦知識擴展——開放適配問題解答： 1、百度提供的三種開放適配（自主適配、標注Meta聲明、對應關(guān)系Sitemap），是不是只要做其中的一個就行了，如果三個我都做，會不會有影響？順便問下自主適配如何設(shè)置？ 答：自主適配需要從服務器端進行，PC與主移動版本用301重定向，各移動版本之間用302重定向，然后使用抓取診斷工具，看百度移動抓取是否抓PC站的url的時候識別為移動url狀態(tài)，你能做的話就都做，只要適配的映射關(guān)系沒有沖突，保證唯一正確。
2、從移動端打開一個頁面，如果這個頁面只存在PC端，不存在移動端，那么這個頁面應該是個轉(zhuǎn)碼頁面（是不是也可以這樣理解，移動端沒有PC端的頁面都會被進行轉(zhuǎn)碼），問題來了，進入轉(zhuǎn)碼的這個頁面的PV是算移動端的還是PC端的？ 答：轉(zhuǎn)碼是有幾率的，一般頁面實在質(zhì)量不利于移動端瀏覽，也不會給你轉(zhuǎn)碼，而且轉(zhuǎn)碼的前提是用戶從搜索進入或瀏覽器自動轉(zhuǎn)碼適應，如果用戶不是從搜索進入或瀏覽器沒有轉(zhuǎn)碼適應功能，那么就不會給你轉(zhuǎn)碼了。
pv得看你使用的統(tǒng)計代碼性質(zhì)，如果轉(zhuǎn)碼后源碼破壞了你的統(tǒng)計代碼的調(diào)用，或者統(tǒng)計代碼不利于接收移動端數(shù)據(jù)，就不會有這個訪客的統(tǒng)計，如果僅僅是pc頁面，那么這個pv就計算進你安裝代碼的那個pc域名下，然后你可以進無線分析，查看到移動用戶的情況。
3、假如我的移動端內(nèi)容都是產(chǎn)品，且不具備關(guān)鍵詞排名優(yōu)勢，而從移動端搜索出來的關(guān)鍵詞排名都來自PC端內(nèi)容頁面，如果我把PC端的這些內(nèi)容頁面都對應到移動端，修改不同TDK標簽，然后把移動端的內(nèi)容頁與PC端內(nèi)容頁做適配一一對應，這樣會不會有助于關(guān)鍵詞的排名？ 答：移動pc的tdk及用戶行為本身就有很大區(qū)別，比如移動端用戶更多看中流量的情況，而pc端用戶更喜歡頁面的豐富與設(shè)計感（就會造成數(shù)據(jù)量大，圖片多，對移動用戶來說不喜歡的）。
在線咨詢