css 添加到iPhone弹出窗口的图标和退出交叉图标使用网站favicon.png

Posted 2021-05-13

<div class="addtohome">
<div class="flexCenter">
<div class="addToHomeLogo"><img src="/favicon.png" alt="logo"></div>
<div class="addHomeText">Tap <span class="addIcon"></span> and then 'Add to Home Screen' to save this website to your iPhone.</div>
</div>
</div>

<script>
	$(document).ready(function(){
		var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone") != -1 ? true : false;
		var isiPod   = navigator.userAgent.toLowerCase().indexOf("ipod")   != -1 ? true : false;
		var isChrome = navigator.userAgent.toLowerCase().indexOf("crios")  != -1 ? true : false;


		if( (isiPhone || isiPod) && !isChrome){
		  	addtohome();
		}

	});
  
	function addtohome(){
		$('.addtohome').show();
		$('.addtohome').delay(2000).animate({'bottom':'5px', 'opacity': 1}, 1000);
		$('.addtohome').click(function(){
		$(this).fadeOut();
	});
}
</script>

/*Add to Home Screen Button */

.addtohome, .addtohome * {
  
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.addtohome {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 20px;  
  margin: auto;
  display: none;
  z-index: 1000000;  
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;  
  padding: 8px 2%;
}

.addToHome .flexCenter {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
           
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
}

.addToHomeLogo {
  display: inline-block;
  width: 65px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.addToHomeLogo img {
  width: 100%;
  height: auto;
}

.addtohome .addHomeText {
  display: inline-block;
  width: calc(94% - 65px);
  margin-left: 2%;
  color: #fff;
  font-weight: 300;
  font-size: 0.85em;
  line-height: 1.4em;
  padding: 8px 0 6px;
}
.addIcon {
  margin: 0 2px;
  width: 12px;
  height: 12px;
  display: inline-block;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  position: relative
}
.addIcon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  height: 1px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
.addIcon:after {
  content: "\f176";
  font-family: FontAwesome;
  font-size: 10px;
  position: absolute;
  top: -10px;
  left: 3px;
  margin: auto;
}
.addtohome:after {
  position: absolute;
  bottom: -10px;
  left: 46%;
  width: 0px;
  height: 0px;
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(0, 0, 0, .8);
}
.addtohome:before {
  content:  "\f057";
  font-family: FontAwesome;
  color: #fff;
  position: absolute;
  top: 1px;
  right: 3px;
}