1.安装PHP和Apache,在Apache Server中的www目录中新建一个网站的目录:myweb
2.在
http://www.adaptive-images.com/上,下载zip文件,如:adaptive-images.1.5.2.zip,
然后解压文件,将其中的.htaccess和adaptive-images.php拷贝到myweb中(如果已存在的web站点的目录中已经存在.htaccess了,不要覆盖它了;此时是新建的myweb目录其中是没有这2个文件的),然后在myweb中创建一个ai-cache文件夹(其中存放后面使用手机访问时按照屏幕尺寸断点命名的文件夹)。
3.将如下JS脚本复制到每个需要自适应图片的网页的头部:
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
4.修改.htaccess,让myweb中test中图片被缩放:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images -----------------------------------------------------------------------------------
# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !ignore-this-directory
# RewriteCond %{REQUEST_URI} !and-ignore-this-directory-too
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} test
# 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>
4.测试页面:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<!-- The Adaptive Images JavaScript -->
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
</head>
<body>
<div id="example">
<h2>Example in action</h2>
<div class="gallery">
<div class="image_main">
<img src="/myweb/test/creepy.jpg" alt="" />
</div>
</div>
</div>
</body>
</html>
以上内容的如图所示:
test中图片creepy.jpg:
5.启动Apache,本地访问:
http://localhost/myweb/test.html,查看页面访问是否正常。
6.启动本地Android模拟器,通过访问
http://10.0.2.2/myweb/test.html,测试自适应图片的呈现。
- 大小: 829.8 KB
- 大小: 622.1 KB
- 大小: 71.6 KB
- 大小: 57.6 KB
分享到:
相关推荐
物以稀为贵,物价太高,但货真价实,让图片根据设备的尺寸自动生成响应尺寸的图片
Nonlinear and Adaptive Control Systems:(非线性和自适应控制系统)
自适应滤波算法与实现(第四版),英文版,Paulo S. R. Diniz,2013
2.3 A FSF Architecture Using Adaptive Linear Combiner Filter and Radial Basis Function Network Feature Extractor 2.3.1 FSF Realization 2.3.2 ALC-RBF FSF System Learning 2.3.3 Image Contour ...
自适应滤波的经典教材,讲解详细,2013第二版,增加了很多最新的内容
Adaptive filters play a very important role in most of today’s signal processing and control applications as most real-world signals require processing under conditions that are difficult to specify ...
Engineering Adaptive Software Systems: Communications of NII Shonan Meetings ISBN-10 书号: 9811321841 ISBN-13 书号: 9789811321849 Edition 版本: 1st ed. 2019 Release Finelybook 出版日期: 2019-01-15 ...
本书记录了渐进增强的起源,其原理和机制,并揭示了无数实用方法,您可以使用HTML,CSS和JavaScript应用渐进增强原理。
Adaptive Server 参考手册 包含有关 Sybase® Adaptive Server ® Enterprise 和 Transact-SQL® 语言的四本指南: • 构件块 介绍了 Transact-SQL 的各个组成部分:数据类型、内置 函数、全局变量、表达式、标识符...
Robust and Adaptive Control With Aerospace Applications书的电子版,鲁棒自适应控制及其航空航天应用
Subband Adaptive Filtering Theory and Implementation
进化迁移的动力学分析I: 对竞争压力的响应,王稳地,,本文建立了具有突变个体进化迁移的动力学模型。利用摄动方法,我们发现了突变个体赢得或失去与固有个体竞争的进化迁移策略。我们�
指纹脊线方向图提取 ADAPTIVE FLOW ORIENTATION-BASED FEATURE EXTRACTION IN FINGERPRINT IMAGES
适应性主题 在您的颤振的应用中添加了光明与黑暗的主题支持最简单的方法。... import 'package:adaptive_theme/adaptive_theme.dart' ; import 'package:flutter/material.dart' ; void main () { runApp ( MyApp ());
This book presents a comprehensive overview of the recently developed L1 adaptive control theory, including detailed proofs of the main results. The key feature of the L1 adaptive control theory is ...
In recent years adaptive signal processing has been applied to a variety of areas, ranging from bio-medical applications to telecommunications networks. Such filters can self-adjust to the ...
如何建造$ cd ~/catkin_ws/src/$ git clone https://github.com/yzrobot/adaptive_clustering.git$ cd ~/catkin_ws$ catkin_make引文如果您正在考虑使用此代码,请参考以下内容: @article{yz19auro, author = {Zhi ...
Adaptive control: stability, convergence and robustness
这是一本讲解快速开发的设计模式和原则的著名教材, 本书以.net c#语言为例. 这是目前最新版(截至2019年4月). 网站上已经有azw版本, 这个是pdf版, 更方便阅读.
Children's adaptive behavior scale: A new measure of adaptive functioning Psychology in rhe Schools 1980, 17, 159-162 CHILDREN’S ADAPTIVE BEHAVIOR SCALE: A NEW MEASURE O F ADAPTIVE FUNCTIONING ...