优化WordPress 博客在iPhone中的显示

  • 时间:
  • 浏览:1

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

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

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

真是很简单,可能性亲戚朋友知道 苹果手机56手机手机手机 显示屏的分辨率统一是 4500px,那就只时要为你这个 深度1的设备单独定义样式就还可以 了,就和普通的 CSS 引入土土妙招相似,土土妙招有你这个 :

1、为 苹果手机56手机手机手机 单独引入另另有一个新的 CSS 文件(我所以这么干的)

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

把你这个 装进 header.php 头部的 style.css 引入文件也不就还可以 。

2、直接在 style.css 中修改,把对 iphone 下的样式定义写在 style.css 中的最后即可。

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

.forIphone{

/* style for 苹果手机56手机手机手机 */

}

}

@media only screen and (max-device-width:4500px) 你这个 是 CSS3 的写法,所以你妄想在 苹果手机56手机手机手机 下用许多哪几个扣扣浏览器、UCWEB 等货去尝试,此土土妙招只对 safari 等标准浏览器有效。

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

转载请注明来源:Life Studio

有好的文章希望站长之家帮助分享推广,猛戳这里让我投稿