Javatpoint标志
Javatpoint标志

什么是苹果触摸图标?

什么是苹果触摸图标

苹果触摸图标也被称为Apple - Touch -icon.png文件,在苹果iPhone、iPod Touch和iPad上用作网页图标,很像Favicon。当用户添加书签或将网站添加到主屏幕时,就会使用这个符号。这些苹果产品可以追溯到网站的快照,如果无法找到这个文件,它通常只是一个白色的正方形。

类中提供了位置超文本标记语言,这个文件应该是57 * 57尺寸的。png格式,并位于主目录中。下面展示了该标记在HTML中的外观。

在使用此文件时,苹果产品在默认情况下会给该符号提供像按钮一样的圆角。

如何制作一个并应用到你的网站

拥有正确的图标将提高它被更频繁地点击的可能性,使用户更容易回忆起它在设备上的位置。一旦你选择了一个简单的元素或你的品牌作为苹果图标,生成一个方形的png文件,名称为“Apple -touch-icon”,尺寸为180180。我们之所以说180180,是因为第一代iPhone的基本尺寸是5757,而iPhone 6 Plus由于其增强的显示屏和PPI,需要一个180180的符号。苹果图标有9种不同的主要尺寸(每英寸像素)。

或者,如果你的网站是建立在WordPress,你可以利用这个由同一作者或这个有用的网站创建的插件来创建苹果符号,甚至测试它的操作。

通过使用以下HTML示例,确保头文件中的图标也被定义了:

这将确保符号被正确的iOS设备识别,并且您的访问者有一个无缝的观看体验。

如何在WordPress中插入苹果触摸图标?

请按照以下步骤添加你的苹果触摸图标。

步骤1)复制下面的代码并将其放入functions.php文件中。通过使用这段代码,你可以在你的网站上添加苹果触摸图标。

步骤2)在此之后,您必须使每个图标在所需的大小(请参阅下面代码中的具体尺寸属性)。

步骤3)最后,您必须将图标路径更新到保存图标的位置。

如何制作一个响应式网站的苹果触摸图标?

一个苹果触摸图标是用来当消费者保存你的网站到他们的iOS触摸屏设备的主屏幕或书签。如果你没有指定图标,苹果会使用你网站的截图作为图标,这通常会导致一个无法识别的正方形。我们将向您展示如何为您的用户友好的网站开发一个独特的苹果触摸图标,这样您就不会强迫您的客户看到一个低于标准的苹果图标。

制作一个Apple Touch图标

您的Apple Touch图标必须是在Photoshop或者在初始阶段使用另一个图像编辑器。文件应该保存为“apple-touch-icon.png”,大小应该是180 * 180像素。

添加你网站的Apple Touch图标文件。

下一步是将Apple Touch图标文档上传到您的网站。你可以把它放在任何你喜欢的地方,但是,我们建议将它存储在你的主图片文件夹中。由于我们将在下一阶段使用它,请跟踪您存储文件的位置。

通过使用链接元素,定义你的苹果触摸图标。

最后一步是在添加到页面HEAD元素的链接元素中识别并命名最新的Apple Touch图标。







Youtube 观看视频请加入我们的Youtube频道:现在加入

反馈


帮助他人,请分享

脸谱网 推特 pinterest

学习最新教程


准备


热门的技术


B.Tech / MCA






Baidu
map