CSS3中由于有media queries，使得给不同屏幕添加样式变的相当简单。但是如果你想要让网页在不同的屏幕下有不同的内容或者不同的HTML结构的话又该怎么办呢？
WordPress 有一个 wp_is_mobile 的函数可以使用，但是这个函数涵盖了很多的设备，并且也不能够够针对特殊屏幕尺寸。
这里给出一些我使用的纯前端解决方案的技术。
使用Javascript获取屏幕大小
只要document.ready一就绪，我们就可以使用javascript侦测屏幕的宽度。下面是检查屏幕宽度是否大于690的代码片段，然后可以在其中做点什么事（比如改变结构或者向DOM加入一些东西）。
|
1
2
3
4
5
6
7
|
jQuery ( document ) . ready ( function ( ) { if ( document . body . clientWidth > 690 ) { // Do Something
}
}
)
;
|
只加载需要的脚本
有一些小的 javascript 库能够够帮助你根据屏幕大小加载脚本（一些甚至可以使用类似于 CSS media queries 的语法）。 Enquire.js 就是这样的一个库。
但是我通常就使用自家的方法。我把下面这段简洁的 javascript 函数放在我的全局脚本里：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// Post Load Scripts function lazyScript ( check , url , callback ) { if ( ! check ( ) ) { return ; }
$
.
ajax
(
{
url : url , dataType : 'script' , success : callback , cache : true
}
)
;
}
;
|
然后，使用上面的函数方法来侦测屏幕大小，举个例子，当屏幕大小大于690px时，我通过下面的代码加载 lightbox 脚本：
|
1
2
3
4
5
6
7
8
9
10
11
|
$ ( document ) . ready ( function ( ) { if ( document . body . clientWidth > 690 ) { // Lightbox script for article image lazyScript ( function ( ) { return $ ( 'body' ) . is ( '.single-post' ) ; } , '/scripts/jquery.lightbox.js' , function ( ) { $ ( 'img' ) . lightbox ( ) ; }
)
;
}
)
;
|
广告加载
广告能让网站像爬行一样慢，无论什么时候他们可能加载，我都尝试将他们放进 iframe 。如果你使用这个技术，你也可以侦测屏幕大小，然后给不同的屏幕加载合适大小的广告。
插入一个iframe的一个小例子：
|
1
2
3
4
5
|
// Banner Ad
var banner_ad = $ ( '<iframe id="banner-ad" src="/includes/banner-ad.html" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>' ) . css ( { 'height' : '90px' , 'width' : '720px' } ) ; $ ( '#banner-ad-container' ) . empty ( ) . append ( banner_ad ) ; |
延迟加载图片
目前优化图片加载就是响应式设计里的一个Holy grail（圣杯，也可以说是一个难点，关于这个单词的具体意思见附录一）。我使用过的优化技术就是延迟加载。就是用一个透明的像素(src=”pixel.gif”)来代替所有的图片，或者你实在很喜欢使用 data uri。然后当 window.ready ，将 src 内的图片换成之前存在 data 属性里(‘data-src’)的 的真正的图片地址。
下面是 image 标签的结构：
|
1
|
< img src = "/pixel.gif" data - src = "/my-image.jpg" width = "100" height = "100" > |
下面是我使用的简洁的 Jquery 插件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// Lazy Load Images $ . fn . lazyImage = function ( callback ) { var imgLen = this . length , count = 0 ; return this . each ( function ( ) { if ( $ ( this ) . attr ( 'data-src' ) ) { var imgTag = this , imgSrc = $ ( this ) . attr ( 'data-src' ) , del ; i = new Image ( ) ; i . onload = function ( ) { $ ( imgTag ) . attr ( 'src' , imgSrc ) . fadeTo ( 400 , 1 , function ( ) { ( count ++ && imgLen == count ) && ( typeof callback == 'function' ) && callback . call ( this ) ; } ) ;
}
;
i . src = imgSrc ;
}
}
)
;
}
;
|
|
1
|
$ ( "#content img" ) . lazyImage ( ) ; |
这个技术也可以很容易为不同的屏幕适应加载优化图片。使用两个 data 属性，而不是一个。一个用于标准大小的图片，然后一个用于小图片。
|
1
|
< img src = "/pixel.gif" data - src - large = "/my-image-large.jpg" data - src - small = "/my-image-small.jpg" width = "1200" height = "600" > |
在 WordPress 中 add_image_size 允许你生成这两个不同大小的图片。上面的 jquery 只要进行一点微调然后就可以用来侦测屏幕大小加载合适的图片。
附录一
Holy grail一个非常常见的英文单词，语意，圣杯。 圣杯的传说来自于基督教，传说那是耶酥基督在最后的晚餐中使用的绿柱玉琢制的酒杯，而圣约瑟(joseph of arima thea)则用它来接耶酥基督伤口流出的宝血。 在罗马帝国灭亡后欧洲黑暗时代的亚瑟王的传说中，寻找圣杯则成为骑士们的最高目标。 Holy grail在延续千年的传说之后，常常被用来代表众人追求的最高目标，而它的另外一层含义，则是一种对渺茫希望的暗示，即，Holy grail是一种理想，崇高的理想，但是，也仅仅是一种，理想。
这篇是翻译的一篇国外博客，原文参见： Optimizing Responsive Layouts
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。