优化WordPress 博客在iPhone中的显示

齐天大剩孙悟空

【如内容违法或虚假，请联系上述邮件删除】@media only screen and (max-device-width:480px) {
把这个放在 header.php 头部的 style.css 引入文件之后就能够。
“估量在未来一两年内，移动终端上网用户将超越PC互联网。”这话不是我说的，而是出自新浪 CEO 曹国伟之口。当然，我也很认同他的观念，在无聊的上下班路上、在指导开会高谈阔论时、以至是坐在马桶上便便的时分，移动终端设备都曾经成为了交流电脑随时随地能够衔接上互联网的最好工具。而往常最火最潮的移动终端设置无异于苹果系列的 iPhone、iTouch 以及 iPad，也就是说，假如你的网站能够在以上这些移动终端设备上能够提供更好的用户体验，也就有可能赢得更多的市场。
}
}
此办法只是一个抛砖，还有更多神奇的玩法等你去开发，比如说如何优化 WordPress 在 iPad 上的显现？当然，这个方面不只是应用在 WordPress 上，一切支持 CSS3 阅读器的用户和网站都能完成这一功用，try try 吧~

本文将以 iPhone 为例，引见一下如何在众多移动终端设备上个性化设置你的 WordPress 博客。有 iPhone 的童鞋无妨先用 iPhone 上的阅读器 safari 来阅读一下本站，看一下和电脑上的阅读器看到的有何不同？
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="<?php bloginfo('template_directory');?>/iphone.css" />
其实很简单，由于我们知道 iPhone 显现屏的分辨率统一是 480px，那就只需求为这一宽度的设备单独定义样式就能够了，就和普通的 CSS 引入办法相似，办法有两种：
@media only screen and (max-device-width:480px) 这种是 CSS3 的写法，所以你妄想在 iPhone 下用其他什么扣扣阅读器、UCWEB 等货去尝试，此办法只对 safari 等规范阅读器有效。
1、为 iPhone 单独引入一个新的 CSS 文件（我就是这么干的）
2、直接在 style.css 中修正，把对 iphone 下的样式定义写在 style.css 中的最后即可。
：Life Studio
/* style for iPhone */
哈，没错，如图所示，左右两图分别是本站首页优化前和优化后的比较。在优化之前iPhone 上阅读本站基本上和在电脑上看到的一样，而在优化之后 iPhone 上阅读本站则能够看到一个单栏的页面。相对电脑显现器来说，手机显现屏很小，要在有限的显现范围内展示给用户最重点最需求的内容才是霸道，所以我把侧边栏、轮播图、广告、顶部工具条、评论部分等那些个花里胡哨的东西给躲藏了，这是如何做到的呢？
.forIphone{
昆明韩辰整形: http://www.kmhczxyy.com/zz/bahen/ 由kfiwe整理owke发布(关注老榕树网络旗下“网络思维”微信公众号:wlsw360 (每天都有好文章)

 

                                                   本帖如有虚假或违法，请联系邮箱删除，本社区删贴不收任何费用，欢迎举报。老榕树社区属老榕树网络旗下网站，旨在为老榕树用户提供创业咨询、网站建设技术交流、源码下载、提供各种实用工具。如有部分帖子涉及违法、虚假，请你第一时间与社区联系，把需要删除的社区链接提供给我们，我们核实之后，第一时间删除。邮箱：125175998@qq.com