“預(yù)計(jì)在未來一兩年內(nèi)，移動(dòng)終端上網(wǎng)用戶將超過PC互聯(lián)網(wǎng)。”這話不是我說的，而是出自新浪 CEO 曹國(guó)偉之口。當(dāng)然，我也很認(rèn)同他的觀點(diǎn)，在無聊的上下班路上、在領(lǐng)導(dǎo)開會(huì)高談闊論時(shí)、甚至是坐在馬桶上便便的時(shí)候，移動(dòng)終端設(shè)備都已經(jīng)成為了替換電腦隨時(shí)隨地可以連接上互聯(lián)網(wǎng)的最好工具。而如今最火最潮的移動(dòng)終端設(shè)置無異于蘋果系列的 iPhone、iTouch 以及 iPad，也就是說，如果你的網(wǎng)站可以在以上這些移動(dòng)終端設(shè)備上能夠提供更好的用戶體驗(yàn)，也就有可能贏得更多的市場(chǎng)。

本文將以 iPhone 為例，介紹一下如何在眾多移動(dòng)終端設(shè)備上個(gè)性化設(shè)置你的 WordPress 博客。有 iPhone 的童鞋不妨先用 iPhone 上的瀏覽器 safari 來瀏覽一下本站，看一下和電腦上的瀏覽器看到的有何不同？

哈，沒錯(cuò)，如圖所示，左右兩圖分別是本站首頁優(yōu)化前和優(yōu)化后的比較。在優(yōu)化之前iPhone 上瀏覽本站基本上和在電腦上看到的一樣，而在優(yōu)化之后 iPhone 上瀏覽本站則可以看到一個(gè)單欄的頁面。相對(duì)電腦顯示器來說，手機(jī)顯示屏很小，要在有限的顯示范圍內(nèi)展現(xiàn)給用戶最重點(diǎn)最需要的內(nèi)容才是王道，所以我把側(cè)邊欄、輪播圖、廣告、頂部工具條、評(píng)論部分等那些個(gè)花里胡哨的東西給隱藏了，這是如何做到的呢？

其實(shí)很簡(jiǎn)單，因?yàn)槲覀冎��?iPhone 顯示屏的分辨率統(tǒng)一是 480px，那就只需要為這一寬度的設(shè)備單獨(dú)定義樣式就可以了，就和普通的 CSS 引入方法類似，方法有兩種：

1、為 iPhone 單獨(dú)引入一個(gè)新的 CSS 文件（我就是這么干的）

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="<?php bloginfo('template_directory');?>/iphone.css" />

把這個(gè)放在 header.php 頭部的 style.css 引入文件之后就可以。

2、直接在 style.css 中修改，把對(duì) iphone 下的樣式定義寫在 style.css 中的最后即可。

@media only screen and (max-device-width:480px) {

.forIphone{

/* style for iPhone */

}

}

@media only screen and (max-device-width:480px) 這種是 CSS3 的寫法，所以你妄想在 iPhone 下用其他什么扣扣瀏覽器、UCWEB 等貨去嘗試，此方法只對(duì) safari 等標(biāo)準(zhǔn)瀏覽器有效。

此方法只是一個(gè)拋磚，還有更多神奇的玩法等你去開發(fā)，比如說如何優(yōu)化 WordPress 在 iPad 上的顯示？當(dāng)然，這個(gè)方面不只是應(yīng)用在 WordPress 上，所有支持 CSS3 瀏覽器的用戶和網(wǎng)站都能實(shí)現(xiàn)這一功能，try try 吧~

轉(zhuǎn)載請(qǐng)注明來源：Life Studio

標(biāo)簽： WordPress博 陀嘔

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。