苹果触摸图标的网站 [英] Apple Touch icon for websites

查看:141
本文介绍了苹果触摸图标的网站的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

< link rel

现在,我已经在头脑中包含了Apple Touch图标。 =apple-touch-iconhref =/ apple-touch-icon.png>



然而,在 Q& A 什么是正确的像素尺寸为苹果触摸图标? 在接受的答案中指出,根据苹果的指导原则,现在需要三个图像。



那么如何将这些代码插入代码的头部?解析方案

在这里,你可以去,希望这会有所帮助。



如果你想苹果为你做点美感(添加光泽),那么你会把它们放到< head> tags:

 < link rel =apple-touch-iconhref =apple- touch-iphone.png/> 
< link rel =apple-touch-iconsizes =72x72href =apple-touch-ipad.png/>
< link rel =apple-touch-iconsizes =114x114href =apple-touch-iphone4.png/>
< link rel =apple-touch-iconsizes =144x144href =apple-touch-ipad-retina.png/>

如果您想预分配图片,Apple会显示它那么你会这样做:

 < link rel =apple-touch-icon-precomposedhref = apple-touch-iphone.png/> 
< link rel =apple-touch-icon-precomposedsizes =72x72href =apple-touch-ipad.png/>
< link rel =apple-touch-icon-precomposedsizes =114x114href =apple-touch-iphone4.png/>
< link rel =apple-touch-icon-precomposedsizes =144x144href =apple-touch-ipad-retina.png/>

如果您包含多个设备,iOS设备将会查找正确的大小并自动使用该图像。从示例中的图像名称可以看出,带有视网膜显示屏的iPad需要144x144像素的图标,iPhone 4 / 4S / 5需要114x114像素的图标,原始iPad(和iPad 2,作为屏幕分辨率也不例外)需要72x72像素的图标,而原始iPhone不需要尺寸规格,但供您参考时为57x57像素。


Up to now, I've been including the line for the Apple Touch icon in my head like this:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

However, in the Q&A "What are the correct pixel dimensions for an apple-touch-icon?" it is stated in the accepted answer that three images are now needed according to Apple's guidelines.

So how would one go about inserting these into the head section of the code?

解决方案

Here you go, hope this helps.

If you want Apple to do the aesthetic bit for you (add the gloss) then you'd put in these to the <head> tags:

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

If you want to precompose the image, so that Apple displays it without the gloss, then you'd do this:

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

Providing you include more than one, the iOS device will look for the correct size and utilise that image automatically. As you can see from the names of the images in the example, the iPad with retina display needs an icon which is 144x144px, the iPhone 4/4S/5 needs an icon which is 114x114px, the original iPad (and iPad 2, as the screen resolution is no different) needs an icon which is 72x72px, and the original iPhone doesn’t need a size specification, but for your reference it is 57x57px.

这篇关于苹果触摸图标的网站的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆