Sometimes I often encounter the mobile end of the ceiling effect, beginning I also just looked on the internet, respectively, iOS and Android two styles, as follows:
/*!*android*!*/
. head {
position:fixed;
top:0;
left:0;
Z-index:5;
}
/*!*ios*!*/
. head{
Position:-webkit-sticky;
Position:sticky;
top:0;
left:0;
Z-index:5;
}
After setting up you will find that only the top effect of iOS phone is OK, Android phone is not working at all, this is because the style is covered, iOS style in the bottom, the same weight, naturally the Android style covered. So how to solve it?
I first get the system type of the phone, and then according to different types to add different class names, to achieve the same effect! The specific code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name= "viewport" >
<title>Title</title>
<style>
. head{
Width:7.5rem;
Height:1rem;
Line-height:1rem;
Text-align:center;
/*position:fixed;*/
Background: #fff;
z-index:1001;
}
/*!*android*!*/
. headandr {
position:fixed;
top:0;
left:0;
Z-index:5;
}
/*!*ios*!*/
. headios{
Position:-webkit-sticky;
Position:sticky;
top:0;
left:0;
Z-index:5;
}
. headhead{
Width:7.5rem;
Height:1rem;
position:relative;
}
</style>
<body>
<div class= "Head" >//This is the head
<i class= "Coordinate" ></i>
<span> Beijing </span>
<i class= "logo" ></i>
<i class= "_user" ></i>
<em class= "Wode" ></em>
</div>
<div class= "Headhead" ></div>//Andro The ceiling is a part of the content that needs to be populated to its original location (Headhead is an element of the same size as the head)
<div class= "con" > Intermediate content Area </div>
JS section!!!!!!!!!! 1
<script src= "Js/zepto.min.js" ></script>//class library to be introduced on the mobile side
<script>
Document.queryselector ("HTML"). Style.fontsize = document.documentelement.clientwidth/375*50+ "px"; 1rem = 50px of the mobile terminal set by itself;
var u = navigator.useragent; Get information about a monitor
var isandroid = u.indexof (' Android ') >-1 | | U.indexof (' Adr ') >-1; Android Terminal
var Isios =!! U.match (/\ (i[^;] +;( U;)? Cpu.+mac OS x/); iOS terminal
if (Isios = = true) {//Mac, Headhead hidden, add class name Headios
Console.log (1);
$ (". Headhead"). Hide ();
$ (". Head"). AddClass ("Headios");
}else{//Andro, plus class name Headandr
Console.log (0);
$ (". Head"). AddClass ("Headandr");
}
</body>
This solves the problem, remember that this code copy and paste when the comments to use the correct format,
Mobile End Ceiling (iOS and Android)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
