iPhone 5发布了，虽然有些让人失望，但是 iPhone 的地位还是无可厚非的。随着移动设备的大军进入，各位站长是否有考虑过开发自己网站的 APP 呢？...当然不是谁都有这技术的...这样，Safari 的一个叫“添加至主屏幕”的功能就引起了我的注意，我们可以通过它伪装出一个 APP 来。...但是大家是否有发现，“添加至主屏幕”后，那个图标是你网站的缩略图，不怎么好看。那么如何自定义网站“添加至主屏幕”的图标呢？...另外有些网站页面里没有添加代码至 head，但是 Safari 也能下载到图标，抓了一下包分析了一下，原来如果页面里没有，Safari 还会默认访问以下地址： GET /apple-touch-icon...由于在视觉上统一最重要的是形状的统一，所以“圆角”是必须的，但是对于“高光”苹果没有做出特别的强调，所以苹果设置当中把“高光”作为可选项，就产生了 apple-touch-icon 和 apple-touch-icon-precomposed
，进行相应的缩放，当我们不需要这种情况时，可以选择禁止： html { -webkit-text-size-adjust: 100%; } 禁止选中内容 如果你不想用户可以选中页面中的内容，那么你可以禁掉...autoResize() } })() 样式初始化css： normalize.css – 官网下载 normalize.css – github 三、meta标签设置 适应移动端 不对网站进行缓存...多核浏览器,优先使用最新版本的IE 和 Chrome 内核 添加到主屏幕时隐藏地址栏和状态栏（即全屏） 当我们将一个网页添加到主屏幕时，会更希望它能有像 App 一样的表现，没有地址栏和状态栏全屏显示...添加到主屏幕时设置系统顶栏颜色 当我们将一个网页添加到主屏幕时，还可以对系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置，前提是开启了： 有了这个前提，你可以通过下面的方式来进行定义： content...，网页从状态栏以下开始显示； 如果设置为 black-translucent，状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上； 该设置只在 iOS 上有效。
01 触屏劫持发展过程移动智能终端设备由于体积限制，一般都没有鼠标、键盘这些输入设备，用户更多的操作是依靠手指在触屏上的点击或滑动等动作完成。...通过将一个不可见的iframe覆盖到当前网页上就可以劫持用户的触屏操作。由于手机屏幕范围有限，手机浏览器为了节省空间会把地址栏隐藏起来，因此在手机上的视觉欺骗更容易实施。...据悉超过78%的Android设备受此漏洞影响。02触屏劫持技术原理1.桌面浏览器iOS中的safari浏览器可以将一个网页添加到桌面，当做一个独立的应用运行。...添加后，主屏幕上会出现一个由网页缩略图生成的App图标。类似于快捷键方式。这样可以方便进行页面篡改等。...苹果手机在使用Safari浏览器的时候，遇到不明情况的提示框或页面，一定要确认地址栏的地址是否隐藏以及是否正确，若网站上含有触屏劫持，则大概率会添加假的地址栏做误导，需谨慎认清。
viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 禁止将页面中的数字识别为电话号码..." content="email=no"> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 添加到主屏后的标题 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner <meta name="apple-itunes-app"
私有meta标签，它表示：允许全屏模式浏览，在ios上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar； 第二个meta标签表示：强制让文档的宽度与设备的宽度保持...第四个meta标签是指在发送到屏幕的时候默认的命名。 ? ?...--告诉设备忽略将页面中的数字识别为电话号码--> 自定义主屏上的图标 用户添加到主屏后，如果网站没有图标，则默认主屏上的图标为当前网页的截图，你可以通过下面的代码指定在普通和retina屏幕上的icon： 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。
如果网站上传了这个图标文件，用户使用浏览器（仅限于支持这个功能的浏览器）浏览时，就可以把图标显示在浏览器的地址栏中（有时也会显示在历史记录中），如果添加了收藏则收藏夹中也可以看到图标。...主要使用在 Internet Explorer 的收藏夹中，如果网站被添加到收藏夹中，那么在地址栏中也会被显示出来。...这么做还有一个用意就是统计有多少用户收藏了这个网站（可以在日志中看 favicon 请求的次数）。现代浏览器则不管用户是否收藏该网站，都会把图标显示在地址栏或页签中。...（Apple）设备，以及部分安卓（Android）设备，可以使用 添加到主屏幕 Add to Home Screen（Web Clip） 功能在手机的主屏幕上添加一个自定义的图标。...许多浏览器都会将 favicons 显示在浏览器地址栏的左边，而这里经常是用来显示在 HTTPS 网站的证书是否可信，通过使用一个类似的图片来欺骗用户让用户认为这是一个可信站点。
清单（Manifest） 清单让用户可以选择把应用『添加到主屏幕』。清单提供了很多应用被安装到到设备该如何表现的细节说明。任何的错误定义清单将会报告问题。 ?...主题颜色：指示你网站的主题。Chrome使用这个主题颜色来着色浏览器的一些UI部分，比如地址栏。...在桌面Chrome上，它会触发浏览器将应用添加到货架（shelf）。 在移动设备上，它提示安装应用程序（将图标添加到主屏幕）: ?...通过此屏幕，您可以通过启用选项卡中离线复选框来强制离线模式： ? 强制离线模式，反映在应用程序中。 在设备模式屏幕下，离线也是强制的，除网络节流。 重新加载更新：当调试时，这个非常有用。...它使用Cache API（Service Workers规范的一部分）显示存储的资源内容。 Service Worker使用缓存没有限制。
装配了PWA以后，用户可以将网站作为Web APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。...手机端 平板端 电脑端 如果您的手机是小米手机的话，用系统自带的小米浏览器打开本网站，稍等片刻网页即可提示您安装本网站。...用苹果手机的safari应该也可以（未测试） 图片演示 部分手机浏览器不支持PWA，比如博主经常使用的夸克浏览器，国内支持的手机浏览器并不多，这里推荐使用edge浏览器。...图片演示 4、因不可抗拒因素，我也不知道是为什么，可能是因为浏览器加载的问题吧，有时等了好长时间网页也不会提示安装小孙同学，这时候选择浏览器中间的三个点，找到添加到主屏幕的功能，点击安装即可！...电脑端点击浏览器地址栏右侧的安装按钮即可。 四、写在后面 如无必须，勿增实体。可能没几个人会选择安装这个应用吧，小孙同学在线卑微，此文章纯属自娱自乐。如有问题，请在评论区留言。
在苹果手机的Safari浏览器中访问一个页面，用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上（就像安装一个APP，在主屏幕上就会有一个操作的图标），这样下一次可以直接点击图标打开页面...(只对IOS有效) 当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示。...，网页将充满整个屏幕，状态栏会盖在网页之上)。... 添加到主屏后的图标 IOS系统中对ICON...的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/> 添加到主屏后的标题 <meta name="apple-mobile-web-app-title
这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。...如下所示： 当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...页面加载时，将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分。如果地址栏可见，则window.innerHeight将为全屏的高度。...无论地址栏是否可见，屏幕都将是视口的高度。此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。
这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。 如下所示： ?...当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...更糟糕的是，当用户首次访问移动设备上的网站时，地址栏将在顶部可见，因此默认的体验是破碎的体验。...页面加载时，将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分。如果地址栏可见，则window.innerHeight将为全屏的高度。...无论地址栏是否可见，屏幕都将是视口的高度。此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。
移动端Web应用有很多优秀的概念让人应接不暇，但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换成渐进式Web应用。...你可以按照这篇文章一步一步地做，做完之后你的网站将可以实现离线访问，并且可以在桌面上创建该网站的图标。那么下面即将开始入门教程。 什么是渐进式Web应用？...另外，应用程序更新是自动进行的，无需用户交互，所以整体的使用体验对于用户来讲更为的平滑。 渐进式Web应用的“安装”过程很快，只需要在主屏幕上添加一个图标即可。...打开基于Blink内核的浏览器（Opera，Vivaldi，Chrome），然后在地址栏中输入http://localhost:8888/（注意端口号是否正确），即可访问该示例。...你可以使用浏览器的“添加到主屏幕”功能将当前网页添加到主屏幕，在你访问了几个页面之后，浏览器会将这个Web应用“安装”到你的设备上。
渐进式Web应用程序就是为此而生的，它同时具备了Web应用功能和以前只有在原生应用才有的功能的特点，渐进式Web应用程序通过从主屏幕上的图标启动，也可以根据推送通知启动，加载时间几乎可以忽略不计，而且除了可以在线使用外...如果浏览器检测到网站存在PWA清单文件，Chrome会自动出现“添加到主屏幕”按钮。如果用户点击同意，该图标将被添加到主屏幕，并且将安装PWA。 ?...清单文件创建后，将清单文件引用链接添加到index.html中。...但如果将其部署在网站上时，则需要启用HTTPS。 SW的路径不正确。 没有勾选Update on reload。 ?...在这种情况下，self-property 代表窗口对象（即你的浏览器窗口）。 添加到主屏幕按钮 "添加到主屏幕按钮" 允许用户在其设备上安装PWA。
PWA 的主要特点包括下面三点： 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现 体验 - 快速响应，并且有平滑的动画响应用户的操作 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面..."splash_pages": null } 参数解释 name: {string} 应用名称，用于安装横幅、启动画面显示 short_name: {string} 应用短名称，用于主屏幕显示...display: {string} 显示类型 fullscreen 应用的显示界面将占满整个屏幕 standalone 浏览器相关UI（如导航栏、工具栏等）将会被隐藏 minimal-ui 显示形式与...、96x96、128x128、144x144、180x180、192x192、512x512 分辨率的 Logo 图片各一张 推荐图片大小转换网站：https://www.iloveimg.com 将准备好的...如果你的地址栏没有出现这个加号，首先在新的标签页上的地址栏输入Chrome://flags，然后再搜索栏输入PWAS进行查找，会出现两个选项一个为Desktop PWAs local updating，
Engaging ： PWA 可以添加在用户的主屏幕上，不用从应用商店进行下载，他们通过网络应用程序 Manifest file 提供类似于 APP 的使用体验（ 在 Android 上可以设置全屏显示哦...Manifest 在 PWA 中的作用有： 能够将你浏览的网页添加到你的手机屏幕上 在 Android 上能够全屏启动，不显示地址栏 （ 由于 Iphone...手机的浏览器是 Safari ，所以不支持哦） 控制屏幕 横屏 / 竖屏 展示 定义启动画面 可以设置你的应用启动是从主屏幕启动还是从...Push 和 Notification 的关系，Push：服务器端将更新的信息传递给 SW ，Notification： SW 将更新的信息推送给用户。...: “ “ 用来告知浏览器用什么颜色来为地址栏等 UI 元素着色 background_color: “ ” 设置启动页面的背景颜色 icons：”” 就是添加到主屏幕之后的图标 { "name
-- 隐藏顶部 --> 1.让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览...； 2.在ios上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar； 3.其值有三个： default（白色）black（黑色） black-translucent...4.开启对web app程序的支持 5.是指在发送到屏幕的时候默认的命名。 6.让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。 二、QQ浏览器私有 Meta 属性（x5内核定制标签） 屏幕方向 --> 屏幕模式 --> 三、UC浏览器私有 Meta 属性 <!
Icon 当用户通过safari访问我们网站的时候，用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的，展示形式跟原生的应用是一样，所以我们要给我们的网站添加应用Icon。 ? ?...72x72，retina屏幕的iphone所需的尺寸是114x114，retina屏幕的ipad所需的尺寸是144x144。...如果没有当前设备所需尺寸的icon，那么iOS将会选用icon中所有大于此设备所需尺寸的最小的一个。如果没有比设备所需尺寸大的icon，那么选用最大的那个icon。...如果有多个符合条件的icon，那么iOS会选择有precomposed关键词的那个。 如果在HTML中没有指定icon，那么iOS会到WEB根目录下寻找对应的icon。...隐藏Safari用户栏 为了更加像原生应用，我们还可以对Safari的用户栏和地址栏进行隐藏，这个叫作standalone模式，加入以下meta进入此模式： <meta name="apple-mobile-web-app-capable
它们带来更快的页面加载速度、更丰富的插件生态，重新定义了用户对浏览器的期望。 4. 移动时代的挑战 随着移动互联网的兴起，浏览器面临了适应不同屏幕尺寸和操作方式的挑战。...在下一章中，我们将深入了解Edge主界面的各个元素，以及如何更好地利用这些功能提高浏览效率。...1.3 探索Edge主界面 一旦初次设置完成，就可以开始探索Edge的主界面： 地址栏的强大功能 地址栏集成了搜索功能，可以直接在其中输入网址或搜索关键词。...快速访问网站 利用主页上的“快速访问”区域，快速打开常用网站。 标签页的多窗口操作 尝试打开多个标签页，使用标签页管理功能进行组织。...设置默认搜索引擎 在地址栏中直接进行搜索，选择默认搜索引擎并设置为首选。 个性化启动页 选择启动页的外观，可以是常访问网站、Microsoft新闻或自定义背景。
那么为什么有越来越多的网站支持了这个特性呢？1、我想主要是因为，PWA可以通过Service Workers，在没有网络的情况下运行，提高用户体验。...2、另外可以很方便的添加到主屏幕，类似于你装了一个App一样，这样等同于霸占了用户的屏幕，不需要用户去记住你的域名了，点击一下图标，而且前面也提到了，即便在网络不佳的情况下，都可以秒速加载，因为那些html...Web应用的信息，并且允许用户将Web应用添加到他们的主屏幕上。...仅此而以，当然，你可以可以指定应用的名称、图标、启动页URL、屏幕方向等配置信息。...npm run build && npm start 此时，我们在打开 localhost:3000，不出意外的话，我们就可以看到chrome 地址栏安装应用的图标了，我们可以点击安装试试看，这里因为没有写任何
当视口高度变化时，这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度，而是将100vh设置为隐藏了地址栏的浏览器的高度（其实就是100vh高度没变，但是地址栏那块把内容顶出去了一块）。...结果导致：当地址栏可见时，屏幕的底部将被切断，从而破坏了开始时100vh的目的。...在页面加载时，将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分高度。 如果地址栏可见，则window.innerHeight将为全屏的高度。...如果地址栏处于隐藏状态，则window.innerHeight就是你期望的只是屏幕可见部分的高度。 在Wordsheet.io上学习时，你可以看到这一点。...无论地址栏是否可见，屏幕都将是视口的高度。此外，在页面首次加载时将高度固定为适当的大小，可以防止在使用该网站的过程中地址栏隐藏，从而带来尴尬的屏幕调整大小体验。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
