Adaptive Images : 为不同的屏幕尺寸提供不同的图片
为其提供不同的图片。接下来我们就看一看如何利用该技术实现图片自适应。
设置自适应图片
实现 Adaptive Images 解决方案需要 Apache 2、PHP 5.x 和 GD 库,也就是说需要 Web 服务器端编程。首先,在其网站上下载.zip 文件开始配置:
解 压文件,然后将其中的adaptive-images.php和.htaccess文件拷贝到网站的根目录。如果你网站的根目录下已经有一 个.htaccess文件了,不要覆盖它。参考下载包中的instructions.htm文件看看怎么做合适。接着在网站根目录下创建一个名为 ai-cache 的文件夹。
用你最喜欢的 FTP 客户端软件设置该文件夹的权限为777。
然后把如下 JavaScript 代码复制到每个需要自适应图片的网页的头部:
<script>document.cookie=’resolution=’+Math.max(screen.width,screen.height)+'; path=/';/script>
如果你没有使用 HTML5(在下一章会改用 HTML5),想让页面通过标准验证,则需要追加 type 属性。所以 script 标签应如下所示:
<script type=”text/javascript”>document.cookie=’resolution=’+Math.maxscreen.width, screen.height)+'; path=/';</script>
切记这段 JavaScript 代码要放在页面头部( 好作为第一个脚本),因为它需要在页面加载完成之前,而且要在发出图片请求之前运行。下面是我们的示例网站头部加入该脚本后的结果:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ />
<title>And the winner isn’t…</title>
<script type=”text/javascript”>document.cookie=’resolution=’+Math. max(screen.width,screen.height)+'; path=/';</script> <link href=”css/main.css” rel=”stylesheet” type=”text/css” />
</head>
把背景图片放在其他地方
过去,我通常将所有图片都放在一个名如 images 或 img 的文件夹中,不论是用做 CSS 背景的图片,还是通过标签插入的图片。但是在使用自适应图片方案时,建议将那些用于 CSS 的背景图片(或者那些你不想被缩放的图片)放在另一个目录。自适应图片方案默认为此创建的目录是assets。如果你不想缩放某张图片,把它丢进这个文件 夹即可。如果你想将这类图片存在其他(或更多)文件夹中,则需要像下面这样修改.htaccess文件。
<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On # Adaptive-Images ——————————————————– RewriteCond %{REQUEST_URI} !assets RewriteCond %{REQUEST_URI} !bkg# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories # to adaptive-images.php so we can select appropriately sized versions RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php # END Adaptive-Images —————————————————– </IfModule>
上面的代码设定了存在assets或bkg文件夹中的图片不会被缩放。反之,如果你想显式声明只允许某个特定文件夹中的图片被缩放,那么将设置规则中的感 叹号去掉即可。例如,如果我只想让网站根目录下名为andthewinnerisnt的文件夹中的图片被缩放,则修改后的代码如下所示:
<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On# Adaptive-Images —————————————————— 2 RewriteCond %{REQUEST_URI} andthewinnerisnt# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories # to adaptive-images.php so we can select appropriately sized versions RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php # END Adaptive-Images ————————————————– </IfModule>
这就是要设置的全部内容。检查是否能正确生成自适应图片的 简单办法,就是在网页中插入一张大图片,然后用手机访问这个页面。之后用 FTP 软件检查ai-cache文件夹中的内容,你应该可以看到一堆文件,以及使用屏幕尺寸断点命名的文件夹,如480(如下图):
Adaptive Images 方案不仅限于静态网站,它也可以被用于内容管理系统,而且在 JavaScript 被禁用的情况下依然有效。自适应图片方案给我们提供了一种方法,可以根据屏幕尺寸提供完全不同的图片,为那些没有必要下载全尺寸大图的设备节省带宽。
原文:http://www.aaini.com/html/1093.html
Adaptive Images检测访问者屏幕的尺寸,自动创建、缓存并重新缩放内嵌在HTML页面中的图片,以适应显示设备屏幕的大小。无需把变化标记出来。Adaptive Image和流媒体图片技术联合使用,适用于响应式设计。
Adaptive Images为什么要那样做?现在越来愈多的用户使用屏幕更小、速度更慢和带宽更低的设备访问网站。在那样的设备上访问以桌面为中心的网站,图片加载会越 来越慢,引起UI延迟,花费用户更多的带宽和金钱。Adaptive Images就是为了解决上述问题。
项目地址:http://adaptive-images.com/
Adaptive Images : 为不同的屏幕尺寸提供不同的图片相关推荐
- 为不同的屏幕尺寸提供不同的图片(为那些没有必要下载全尺寸大图的设备节省带宽)...
为不同的屏幕尺寸提供不同的图片 现在我们可以让图片完美缩放,而且也知道了如何限制特定图片的显示尺寸.图片尺寸必须比其显示尺寸更大以保证渲染效果,否则的话图片可能看起来很糟糕.基于这个原因,图片文件的体 ...
- 创建支持多种屏幕尺寸的Android应用
负责人:冰凝 原文链接:http://developer.android.com/guide/practices/screens_support.html Android涉及各种各样的支持不同屏幕尺寸 ...
- android设备类型,android根据屏幕尺寸区分设备类型,phone或者pad - yuanyuan
上篇介绍了 Android手机分辨率基础知识(DPI,DIP计算) 想了很多,也查了很多资料不知道如何区分android设备是phone还是pad,android中没有提供固定的方法,有人说用andr ...
- Android平台根据分辨率计算屏幕尺寸,基于物理尺寸来验证手机和平板应用合并的可行性
Android平台根据分辨率计算屏幕尺寸,基于物理尺寸来验证手机和平板应用合并的可行性 出发点:Android系统本身是支持多种分辨率的,如图1所示,一般情况下要适配不同尺寸的设备只需要做两件事, ...
- Android 获取屏幕尺寸与密度
遇到一个问题,我的地图浮标图片在WVGA手机上正好,在QVGA上就显的太大,所以我要根据屏幕的不同调整浮标的大小使其在QVGA大小合适.有的同事提出了依据分辨率来区分不同的屏幕,但是单WVGA就支持好 ...
- 0119吧 iPhone 屏幕尺寸
1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS ...
- Android屏幕尺寸适配注意事项
1 基本设置 1.1 AndroidManifest.xml设置 在<manifest>中添加子元素<supports-screens android:largeS ...
- Android 屏幕尺寸知识
转自:http://www.zcool.com.cn/article/ZNjI3NDQ=.html 1.了解几个概念 (1)分辨率.分辨率就是手机屏幕的像素点数,一般描述成屏幕的"宽×高&q ...
- 小程序 富文本自适应屏幕_自适应文本:跨屏幕尺寸构建可读文本
小程序 富文本自适应屏幕 Many of you may already know about responsive web design. Cited from Wikipedia, respons ...
最新文章
- jhipster 配置 mysql_JHipster技术栈定制 - JHipster Registry配置信息加密
- PowerTip of the Day-How Much RAM Do You Have?
- 服务器漏洞文件被删除漏洞,【华中科技大学 - 漏洞预警】Wordpress = 4.9.6 任意文件删除漏洞...
- jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
- stl 基于哈希的map c++_关于哈希表,你该了解这些!
- odoo10参考系列--视图二(表单视图)
- extjs 月份选择控件_Ext JS 4实现带week(星期)的日期选择控件(实战二)
- Redis Sentinel 机制与用法(二)
- 最简单的图文教程,几步完成Git的公私钥配置
- 低通滤波器降噪matlab,基于MATLAB语音信号降噪处理方法研究
- 从零开始学Snaker(一)- 官方项目运行
- OOzie 入门 【转】
- RealView 应用
- 8.0服务器维护时间,魔兽世界8.0开服第一天遇紧急维护?网友:叫逆水寒还服务器...
- 如何看待国企纷纷卸载微软Office改用金山WPS?
- 【深度学习框架输入格式】NCHW还是NHWC?
- 闹剧还是情有可原?联想撤回科创板上市申请后,股价大跌13%
- dev c++怎么设置断点_斑马进度计划软件可以检查计划中是否存在逻辑断点和错误逻辑关系...
- 芯片的单双电源供电问题
- R时间序列模型之贝叶斯预测
热门文章
- 数组中最大连续子数组和,最大连续子数组积,最大递增子序列
- 57 FI配置-财务会计-固定资产-资产数据传输-定义传输日期和附加参数
- java pk .net_Java与.Net大PK
- mysql 把一个字段的值_mysql把一个表某个字段的内容复制到另一张表的某个字段的SQL语句写法...
- 电脑吃鸡按键详细_一秒八连击的即装即用吃鸡神器-飞智蜂刺手游按键体验
- 响应式禁用(Bootstrap PK AmazeUI)
- element-ui表格组件table踩坑总结
- centos7+svn+mysql_Linux下安装SVN服务(CentOS7下)
- 相机下载_索尼黑卡相机与手机互联APP相关
- 自适应个人收款页HTML源码