优化WordPress 博客在iPhone中的显示

“预计在未来一两年内，移动终端上网用户将超过PC互联网。”这话不是我说的，而是出自新浪 CEO 曹国伟之口。当然，我也很认同他的观点，在无聊的上下班路上、在领导开会高谈阔论时、甚至是坐在马桶上便便的时候，移动终端设备都已经成为了替换电脑随时随地可以连接上互联网的最好工具。而如今最火最潮的移动终端设置无异于苹果系列的 iPhone、iTouch 以及 iPad，也就是说，如果你的网站可以在以上这些移动终端设备上能够提供更好的用户体验，也就有可能赢得更多的市场。

本文将以 iPhone 为例，介绍一下如何在众多移动终端设备上个性化设置你的 WordPress 博客。有 iPhone 的童鞋不妨先用 iPhone 上的浏览器 safari 来浏览一下本站，看一下和电脑上的浏览器看到的有何不同？

哈，没错，如图所示，左右两图分别是本站首页优化前和优化后的比较。在优化之前iPhone 上浏览本站基本上和在电脑上看到的一样，而在优化之后 iPhone 上浏览本站则可以看到一个单栏的页面。相对电脑显示器来说，手机显示屏很小，要在有限的显示范围内展现给用户最重点最需要的内容才是王道，所以我把侧边栏、轮播图、广告、顶部工具条、评论部分等那些个花里胡哨的东西给隐藏了，这是如何做到的呢？

其实很简单，因为我们知道 iPhone 显示屏的分辨率统一是 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 等标准浏览器有效。

此方法只是一个抛砖，还有更多神奇的玩法等你去开发，比如说如何优化 WordPress 在 iPad 上的显示？当然，这个方面不只是应用在 WordPress 上，所有支持 CSS3 浏览器的用户和网站都能实现这一功能，try try 吧~

转载请注明来源：Life Studio

标签： WordPress博 陀呕

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。