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

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

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

其實很簡單，因為我們知道 iPhone 顯示屏的分辨率統(tǒng)一是 480px，那就只需要為這一寬度的設備單獨定義樣式就可以了，就和普通的 CSS 引入方法類似，方法有兩種：

1、為 iPhone 單獨引入一個新的 CSS 文件（我就是這么干的）

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

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

2、直接在 style.css 中修改，把對 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 等貨去嘗試，此方法只對 safari 等標準瀏覽器有效。

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

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

標簽： WordPress博 陀嘔

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