将网站添加至iPhone主屏幕

最新推荐文章于 2024-07-22 15:25:02 发布

转载最新推荐文章于 2024-07-22 15:25:02 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuvw/archive/2013/05/21/3090561.html

本文介绍了一种让网站在苹果移动设备上拥有自定义图标的技巧。通过在网站<head>标签内加入特定<link>标签，可以实现不同尺寸的个性化图标显示，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

apple的移动设备的浏览器都有一个常用功能，就是将常用网页“添加至主屏幕”，这样一个网站几乎就可以当做app来使用可，对用户来说很是方便。但是一个一般的网站，被添加到主屏幕后，图标就是网页的缩略图，很不好看。

经过对部分添加至主屏幕后有个漂亮图标的网站的研究，发现只要在<head>标签中添加一个特殊的<link>就可以搞定。

具体代码如下：

两条分别对应不同大小的图标。

在你的网站也加一个试试看呗？

转载于:https://www.cnblogs.com/xuvw/archive/2013/05/21/3090561.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30719711

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

在iPhone上将网站添加到主屏幕的编程方法

TechPulseZ的博客

09-23

476

为图标选择一个名称（比如"AppIcon"），然后点击"Create". 在右侧的属性检查器（Inspector）中，你可以为不同的设备和尺寸设置图标。在iOS设备上，你可以通过编程的方式将网站添加到主屏幕，这样用户就可以轻松地访问你的网站。请确保将代码中的"https://your-website.com"替换为你的网站的URL，并将"AppIcon"替换为你的图标文件的名称。同样，请确保将代码中的"https://your-website.com"替换为你的网站的URL。如果你有任何问题，请随时提问。

Add-to-home-screen:添加到主屏幕（有时称为Web应用程序安装提示）使用户可以轻松地在其移动或台式设备上安装您的Progressive Web App。用户接受提示后，您的PWA将被添加到他们的启动器中，并且它将像任何其他已安装的应用程序一样运行。为了显示“添加到主屏幕”对话框，您需要

05-28

添加到主屏幕 添加到主屏幕（安装提示），使用户可以轻松地在其移动或台式设备上安装PWA。用户接受提示后，您的PWA将被添加到他们的启动器中，并且它将像任何其他已安装的应用程序一样运行。在这个项目中，我将显示一个自定义按钮，用户可以单击该按钮并将网站/ webapp添加到用户的主屏幕。为了显示“添加到主屏幕”对话框，您需要：监听beforeinstallprompt事件通知用户您的应用程序可以通过按钮或其他元素进行安装，这将生成用户手势事件。通过在保存的beforeinstallprompt事件上调用hint（）来显示提示。我们还可以通过媒体查询@media all和（显示模式：独立）{/自定义样式，如果pwa是打开的窗体主屏幕图标/按钮{background：#ddd;}}检查用户是否打开了PWA窗体的主屏幕图标。 ::经过大量的努力和无数的网站争夺，我已经成功地编

参与评论您还未登录，请先登录后发表或查看评论

Safari浏览器将H5网页添加到主屏幕

dabaooooq的博客

04-12

3730

添加到主屏幕——这个功能属于ios的safari浏览器的特性之一，他可以让我们的H5项目从桌面像App一样打开，其实就是支持全屏显示，可以隐藏搜索栏，并且注意，他是独立的缓存，这一点在某些需要带上特点参数的项目会有些头疼，例如需要根据特点参数才能打开某些页面，处理某些逻辑，这点需要注意一下！可以看到，这里是可以添加到主屏幕的。

safari浏览器_Safari浏览器的秘密技能

weixin_39806818的博客

11-14

357

Safari浏览器是苹果设备的内置浏览器，我发现很多朋友觉得它不好用，就把它放在一个不常用文件夹的角落里，然后下载了第三方的浏览器O__O "…其实Safari有一些超级好用的技巧，熟练掌握后会发现，其实用起来很棒呀！毕竟这是当年乔布斯一手打造的浏览器，看看下面这些秘密技能，你知道吗？1、一键关闭所有标签页Safari使用久了总会有很多页面，难道只能像关闭应用一样一个个手动关闭？其实只要长按Saf...

iOS 添加快捷方式到主屏幕

夏目三三

12-06

1万+

参考文章：iOS 添加到主屏幕/ iOS Add To Desktop iOS创建桌面快捷方式代码在上面文章和其他资料基础上实现此功能，详细介绍和技术点可参考上述文章。Demo是以第三方CocoaHTTPServer为基础，建立本机服务器，调起Safari创建快捷方式。步骤： 1.Demo中首先Pod第三方CocoaHTTPServer和GTMBase64，然后导入第一篇文

苹果ios 浏览器Safari ：apple-touch-icon.png apple-touch-icon-precomposed.png

____

04-16

1万+

打开自己的网站访问日志，发现出现很多404的地址，地址分别都是这2个： 1）http://www.zbphp.com/apple-touch-icon.png 2）http://www.zbphp.com/apple-touch-icon-precomposed.png 搜索了一下关键字：apple-touch-icon.png，apple-touch-icon-precomp

如何将自定义网站在iphone手机上"添加至主屏幕的图标"

热门推荐

sunshine的博客

02-07

1万+

在iphone手机上，网站可以添加到主屏幕，默认情况下，一个网站被添加到主屏幕时，默认显示的是网站截图，如何才能显示成我们自己想要设置的图标呢？我在实际工作中遇到了这个需求，将实现步骤总结如下： 1.制作4中不同尺寸的图片: link rel="apple-touch-icon-precomposed" sizes="144x144" href="./static/apple-tou

html5添加主屏幕,iOS：添加书签到主屏幕

weixin_36474966的博客

06-15

1167

图一图一的是我们操作完之后的效果图。写在最前：在阅读这篇文章的时候，你可能需要温习一下程序间的互调和传值，可以参考一下我的这篇文章。然后，我们可以根据传值，来跳转到不同的页面。在上篇文章中，给出了使用的演示，所以在这篇文章中，这个操作就不再给出。图二为文档目录结构。图二用到的三方库：pod 'CocoaHTTPServer'步骤：先配置好要分享的网页内容content.html，然后对cont...

JavaScript为iphone添加到主屏幕

anyuma8815的博客

11-25

1903

iphone手机有一个书签栏上可以将当前在浏览的网页添加到主屏幕，用户添加该选项之后，就可以从桌面上启动这个web程序，让人看起来有点像web app一样，深受许多人的喜爱。但是很多人却不知道或者懒得去设置，本文将介绍一个JavaScript提示用户添加到主屏幕。设定主屏幕图标 iOS 的网页图标与传统的网页 favicon 相似, 处理方式也差不多, 下面会为你介绍几种处理方...

如何在 iPhone 主屏幕上添加 Google Gemini 快捷方式

TOPSTIP的博客

07-22

1173

在 iPhone 上启动 Gemini 需要打开 Google App，然后切换到 Gemini 标签页，虽然过程不长，但对于经常使用 Gemini 的人来说，每次都要这么绕才能用上它确实有点麻烦。Google Gemini 可以在 iPhone 上使用，但是访问方式极其隐蔽，需要在 Google App 中才能打开使用。不过，现在我发现一种非常简单的方法，可以让你在 iPhone 主屏幕上或使用操作按钮直接打开使用单独的 Google Gemini 应用。

iphone日程添加照片_如何将照片添加到您的iPhone主屏幕

culul01313的博客

09-27

5159

iphone日程添加照片Khamosh Pathak Khamosh Pathak There are some memories that you want to relive and remember forever. The best way to do that is by placing them right on your iPhone’s home screen. Here’s ho...

a2hs.js：:mobile_phone_with_arrow:一个有用的现代JavaScript解决方案，可帮助您的网站用户向其移动iOS设备的主屏幕添加（安装）渐进式Web应用程序（PWA）

02-05

将渐进式Web应用程序（PWA）添加到iOS的主屏幕上一个有用的现代JavaScript解决方案，可帮助您的网站用户向其移动iOS设备的主屏幕添加（安装）渐进式Web应用程序（PWA）。专为iOS Safari 9.x-12.2 +的最新4个主要...

CSS3 做出iPhoneX手机屏幕背景和页面背景图片同时切换特效.zip

07-11

本项目“CSS3做出iPhoneX手机屏幕背景和页面背景图片同时切换特效”聚焦于利用CSS3特性来实现一个特定的交互效果，即当用户滚动页面时，iPhoneX的屏幕背景与页面背景图片能够同步变化，营造出更加动态和引人入胜的...

探索iPhone主屏幕的触摸交互效果

iPhone主屏幕触摸效果知识点详解： 1. 主屏幕概念： iPhone的主屏幕是用户与设备交互的起点，它由一系列的图标组成，每个图标代表一个应用程序或者功能。iPhone主屏幕的设计直观，用户可以通过不同的手势操作来与...

直流微电网系统模型的优化设计与控制策略分析：双端口、改进下垂控制及Simulink仿真完整版

08-09

内容概要：本文详细探讨了直流微电网系统模型的优化设计与控制策略。首先介绍了双端口直流微电网系统的基本架构，其中一个端口连接分布式电源，如太阳能光伏板和风力发电机，另一端口连接恒功率负载。接着重点讨论了外环改进下垂控制和内环双PI环控制策略，这两种控制方式分别用于维持系统功率平衡和快速调节电压电流，确保系统输出的稳定性。此外，还涉及了电压鲁棒控制器、小信号模型、根轨迹分析和粒子群寻优权函数等关键技术，这些技术进一步增强了系统的稳定性和性能。最后，所有控制策略和模型分析均在Simulink环境下进行了搭建和验证。适合人群：从事电力系统研究的专业人士、高校相关专业师生、对直流微电网感兴趣的科研人员。使用场景及目标：适用于需要深入了解直流微电网系统模型及其控制策略的研究人员和技术人员，旨在提高系统的稳定性和效率，特别是在数据中心等对供电稳定性要求较高的应用场景。其他说明：文中提供的Simulink仿真环境便于研究人员进行实验和验证，帮助更好地理解和优化直流微电网系统。

KUKA机器人码垛程序备份详解：操作流程、关键步骤与注意事项

08-09

KUKA机器人码垛程序的备份方法及其重要性。首先解释了码垛程序的基本结构，重点在于初始化设置、HOME点设定以及信号检测循环。接着阐述了具体的备份操作，如通过长按示教器【菜单】键进入存档管理器并选择带系统变量进行备份。文中还提到使用KUKA.ProjectBackup工具进行完整的备份，避免丢失重要的.dat文件。此外，建议将程序目录同步到私有Git仓库，以便于版本管理和快速回滚。最后强调了备份时需要注意的事项，如包含所有相关参数和配置文件，以确保在产线搬迁或控制器更换时能够顺利恢复。适合人群：从事工业自动化领域的工程师和技术人员，尤其是负责KUKA机器人维护和操作的专业人士。使用场景及目标：帮助工程师掌握正确的备份方法，确保在设备更新或故障恢复时能够迅速有效地还原码垛程序，保障生产线正常运行。阅读建议：在实际操作过程中，务必严格按照文中提供的步骤进行备份，同时关注细节，如系统变量的选择和文件命名规范，以提高备份的成功率和完整性。

xpad源码2.0 1111111111111