博客 (34)

Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images!

Things to Consider When Adding Retina Images

The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices.

Simple Retina Images

The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels). This can be done manually by setting the height and width in HTML to half the size of your image file.

<img src="my200x200image.jpg" width="100" height="100">

If you’d like to do something more advanced keep reading below for how you can apply this technique using scripting.

Creating Retina Icons for Your Website

When users add your website or web app to their homescreen it will be represented by an icon. These sizes for regular and Retina icons (from Apple) are as follows:

iPhone	57 x 57
Retina iPhone	114 x 114
iPad	72 x 72
Retina iPad	144 x 144

For each of these images you create you can link them in the head of your document like this (if you want the device to add the round corners remove -precomposed):

<link href="touch-icon-iphone.png" rel="apple-touch-icon-precomposed" />
<link href="touch-icon-ipad.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="touch-icon-iphone4.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="touch-icon-ipad3.png" rel="apple-touch-icon-precomposed" sizes="144x144" />

If the correct size isn’t specified the device will use the smallest icon that is larger than the recommended size (i.e. if you left out the 114px the iPhone 4 would use the 144px icon).

Retina Background Images

Background images that are specified in your CSS can be swapped out using media queries. You’ll first want to generate two versions of each image. For example ‘bgPattern.png’ at 100px x 100px and ‘bgPattern@2x.png’ at 200px x 200px. It will be useful to have a standard naming convention such as adding @2x for these retina images. To add the new @2x image to your site simply add in the media query below (You can add any additional styles that have background images within the braces of the same media query):

.repeatingPattern {
     background: url(../images/bgPattern.png) repeat;
     background-size: 100px 100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
     .repeatingPattern {
          background: url(../images/bgPattern@2x.png) repeat;
     }
}

JavaScript for Retina Image Replacement

For your retina images that aren’t backgrounds the best option seems to be either creating graphics with CSS, using SVG, or replacing your images with JavaScript. Just like the background images, you’ll want to create a normal image and one ‘@2x’ image. Then with JavaScript you can detect if the pixel ratio of the browser is 2x, just like you did with the media query:

if (window.devicePixelRatio == 2) {

//Replace your img src with the new retina image

}

If you’re using jQuery you could quickly replace all your images like this very basic example below. It’s a good idea to add a class to identify the images with hi-res versions so you don’t replace any others by mistake. I’ve added a class=”hires” for this example. Also make sure you have the standard (non-retina) image height and width set in the HTML:

<img class="hires" alt="" src="search.png" width="100" height="100" />
<script type="text/javascript">
$(function () {

	if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          // loop through the images and make them hi-res
          for(var i = 0; i < images.length; i++) {

            // create new image name
            var imageType = images[i].src.substr(-4);
            var imageName = images[i].src.substr(0, images[i].src.length - 4);
            imageName += "@2x" + imageType;

            //rename image
            images[i].src = imageName;
          }
     }

});
</script>

Server-Side Retina Images

If you’d like to implement a server-side retina image solution, I recommend checking out Jeremy Worboys’ Retina Images (which he also posted in the comments below). His solution uses PHP code to determine which image should be served. The benefit of this solution is that it doesn’t have to replace the small image with the retina one so you’re using less bandwidth, especially if you have lots of images that you’re replacing.

Website Optimization for Retina Displays

If you’re looking for additional information on creating Retina images, I’ve recently had a short book published called Website Optimization for Retina Displays that covers a range of related topics. It contains some of what is above, but also includes samples for many different situations for adding Retina images. It explains the basics of creating Retina images, backgrounds, sprites, and borders. Then it talks about using media queries, creating graphics with CSS, embedding fonts, creating app icons, and more tips for creating Retina websites.

2000/XP/2003 下 IIS+PHP+MySQL+Zend Optimizer+GD库+phpMyAdmin安装配置

（假设 C:\ 为你现在所使用操作系统的系统盘，如果你目前操作系统不是安装在 C:\ ，请自行修改。）

一、安装 IIS（Windows2003只要安装“应用程序服务器(IIS,ASP.NET)”即可跳过此步）：

（1）插入系统盘；
（2）进入控制面板-》添加或删除程序-》添加/删除Windows组件-》在“Internet信息服务(IIS)打勾-》下一步安装。
（3）安装完成后在浏览器地址栏输入 htt://127.0.0.1 检查是否安装正常。
如果没有系统盘，那么下载 IIS 5.1 的安装包（for XP），重复上述步骤，安装时指定路径即可。
IIS下载地址：http://soft.mumayi.net/downinfo/2597.html

二、安装 PHP：

（1）官方下载：http://www.php.net/downloads.php。
（2）下载后得到 php 的 zip 压缩包，解压至 C:\php（这个路径可以随意，下面要是用到这个路径，请相应修改）；
（3）将 C:\php\libmysql.dll 和 C:\php\ext\php_mysql.dll 复制到 C:\Windows\system32 下；
将 C:\php\php.ini-recommended 复制到 C:\Windows （Windows 2000 下为 C:\WINNT）并将改名为php.ini，
然后用记事本打开，利用记事本的查找功能搜索：
搜索“; Windows Extensions”并仅打开需要的模块以节省内存（去掉每个模块前的;号即可）：

extension=php_gd2.dll
GD库支持，支持水印。
extension=php_mbstring.dll
支持phpMyAdmin
extension=php_mysql.dll
支持MySQL。

（4）配置 IIS 使其支持 PHP

在“控制面板”的“管理工具”中选择“Internet 服务管理器”，
然后在左侧选择你需要支持 PHP 的 Web 站点上单击右键选择“属性”，
在打开的“Web 站点属性”窗口的“ISAPI 筛选器”标签里找到并点击“添加”按钮，在弹出的“筛选器属性”窗口中的“筛选器名称”栏中输入：PHP，再将可执行文件指向 php5isapi.dll 所在路径，如：C:\php\php5isapi.dll。
打开“Web 站点属性”窗口的“主目录”标签，找到并点击“配置”按钮，在弹出的“应用程序配置”窗口中找到并点击“添加”按钮，在弹出的窗口中新增一个扩展名映射，扩展名为 .php ，单击“浏览”将可执行文件指向 php5isapi.dll 所在路径，如：C:\php\php5isapi.dll，然后一路确定即可。
再打开“Web 站点属性”窗口的“文档”标签，找到并点击“添加”按钮，向默认的 Web 站点启动文档列表中添加 index.php 项。您可以将 index.php 升到最高优先级，这样，访问站点时就会首先自动寻找并打开 index.php 文档。
确定 Web 目录的应用程序设置和执行许可中选择为纯脚本，然后关闭 Internet 信息服务管理器。

2003系统配置：在“Internet 服务管理器”左边的“WEB服务扩展”中设置:
ISAPI 扩展允许

开始-》运行-》输入“iisreset”，重启IIS。

在 IIS 根目录下新建一个 phpinfo.php，内容如下：

<?php
phpinfo();
?>

打开浏览器，输入：http://127.0.0.1/phpinfo.php，将显示当前服务器所支持 PHP 的全部信息。

三、安装 MySQL：

（1）官方下载：http://dev.mysql.com/downloads/mysql/5.2.html
custom
安装
Skip Sign-Up
Finish
Next
Standard Comfiguration
设置数据库密码

（重要）重新启动电脑！

四、安装 Zend Optimizer ：（有需要时安装）

（1）官方下载：http://www.zend.com/products/zend_optimizer
（2）安装时只需选择Web服务器为iis，指定php.ini路径即可。

五、安装 phpMyAdmin：（用于管理MYSQL数据库，可选择）

下载 http://www.phpmyadmin.net，将其解压到站点根目录，
找到 ./libraties/config.default.php，做以下修改：

方案一：
搜索 $cfg['Servers'][$i]['auth_type'] 设置为config
搜索 $cfg['Servers'][$i]['user'] 用户名一般为root
搜索 $cfg['Servers'][$i]['password'] 设置MySQL的密码
打开浏览器，输入：http://127.0.0.1/phpMyAdmin/ ，若 IIS 和 MySQL 均已启动，即可浏览数据库内容。
（此设置允许任何人通过以上路径登录管理数据库，安全性极低）

方案二：
搜索 $cfg['Servers'][$i]['auth_type'] 设置为cookie
搜索 $cfg['Servers'][$i]['user'] 用户名一般为root
搜索 $cfg['PmaAbsoluteUri'] 访问路径，设置为http://127.0.0.1/phpmyadmin/
搜索 $cfg['blowfish_secret'] 这是cookie作用域，设置为127.0.0.1
（此设置只允许本机上登录，并且需要输入用户名密码才能登录，安全性极高）

-----------------------------------------------------------------------------------
至此所有安装完毕。以上配置在所有老版本软件中不一定有效，强烈推荐下载最新版本的软件。

简单安装过程：请各位注意安装顺序

----------------------------------------------------
（一）Apache：
    装在默认目录。安装-自定义-全部选中。
----------------------------------------------------
（二）PHP：
第一步：压缩C:\php5目录下。
第二步：（将PHP目录添加到PATH环境变量中）开始 -> 控制面板 -> 系统 -> 高级 -> 环境变量 -> 系统变量 -> Path -> 双击 -> 加入“;C:\php5”
第三步：将C:\php5\php.ini-recommended 重命名为 php.ini 。
用记事本打开 php.ini ，查找register_globals = Off，把off改成On （有二处）
查找short_open_tag = Off，把off改成On 有一处
查找extension_dir = "./" 改为 extension_dir = "C:\php5\ext"
查找;extension=php_mbstring.dll，把下面几句前面的分号去掉
extension=php_mbstring.dll
extension=php_dba.dll
extension=php_dbase.dll
extension=php_filepro.dll
extension=php_gd2.dll
extension=php_imap.dll
extension=php_ldap.dll
extension=php_mysql.dll
修改了一些文件上传以及内存使用最大限制：
memory_limit = 20M   　　　　内存容量
post_max_size = 20M   　　　闪存容量
upload_max_filesize = 20M   　附件容量
保存退出。
第四步：（使php.ini文件在Windows下被PHP所用）
开始 -> 控制面板 -> 系统 -> 高级 -> 环境变量 -> 系统变量 -> 新建 -> 输入“PHPRC” -> 在“变量值”中输入 php.ini文件所在的目录（例如：C:\php5）
点击“确定”

Microsoft Windows 下的 Apache 2.0.x
　　先停止Apache
　　用记事本打开C:\Apache2\conf(可能在C:\Program Files\Apache Group\Apache2\conf)下的httpd.conf
　　这个文件我改了几个地方：
　　把PHP直接作为apache的一个模块运行，我在里面加了两句：

查找到 #LoadModule ssl_module modules/mod_ssl.so 在它的下面一行加上
  
LoadModule php5_module "C:/PHP5/php5apache2.dll"
AddType application/x-httpd-php .php   注意点前面有个空格滴，大家最好用复制粘贴
(新版apache2.2的php5apache2_2.dll在外面，放上去同理用)

我在D盘下建立了一个www的目录用于存放我的站点文件，在http.conf里改了这样一句话：
把
DocumentRoot "C:/Program Files/Apache Group/Apache2/htdocs"
改成了
DocumentRoot "D:/www"
所有

Apache2.0.x于1.3.x相比2.0.x默认不能直接列目录，如需，就改：
把DocumentRoot "E:/www"这句下的如下语句

<Directory />
    Options FollowSymLinks
    AllowOverride None
</Directory>
改为：
<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory> 

修改目录的默认首页：
如：DirectoryIndex index.htm index.html index.php index.html index.html.var
别的就没再动什么地方，保存后退出。

注意一点的是，要使以上所有这些配置生效需要重新启动电脑

最后我们来测试PHP是否正常载入。打开记事本，输入
<?php
phpinfo();
?>

保存，在弹出的窗口中，文件类型选所有文件，文件名为phpinfo.php，保存位置为网站目录下。如（E:\www\phpinfo.php）
打开IE浏览器输入：http://localhost/phpinfo.php　如果能正常显示就OK了。

-------------------------------------------------------
（三）Zend：
　　先停止Apache
　　安装Zend Optimizer也很简单，安装中它会两处提示其一：选择那种服务器？请选择Apache。其二：PHP.ini的路径？请选择C:\PHP5。其它的按默认配置安装就行了。OK安装完后我的Zend目录就是C:\Zend。

-------------------------------------------------------
（四）Mysql：