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