JS display "Iphone|ipad|ipod|ios", "Android", "PC" according to the access terminal three different content
The main principle is: JS modify the corresponding HTML tag attribute according to the ID value
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<meta name= "OS" content= "Width=device-width, initial-scale=1, maximum-scale=1" >
<title></title>
<style type= "Text/css" >
*{padding:0px;margin:0px;overflow:hidden;}
Body{background: #fff;}
. Adbox{width:calc (100%-5px); margin-left:5px;height:auto;overflow:hidden;padding-bottom:5px;}
. Adbox A{float:left;width:48%;width:-webkit-calc (100%/2-5px); Width:-moz-calc (100%/2-5px); margin-right:5px; Margin-top:5px;background: #f00;p osition:relative;}
. Adbox a img{display:block;width:100%;}
. Adbox A
</style>
<body>
<div class= "Adbox" id= "Adbox" >
<div class= "Con" >
<a id = "Os_left" href= ' target= ' _blank ' ><font color=black> point me, ←</font>.
</a>
<a id = "Os_right" href= "target= ' _blank ' ><font color=black>→ point me </font>
</a>
</div>
</div>
<script type= "Text/javascript" >
if (/(Iphone|ipad|ipod|ios)/i.test (navigator.useragent)) {
document.getElementById ("Os_left"). href= "Apple";
document.getElementById ("Os_right"). HRE = "Apple";
} else if (/(Android)/i.test (navigator.useragent)) {
document.getElementById ("Os_left"). href= "Android";
document.getElementById ("Os_right"). href= "Android";
} else {
document.getElementById ("Os_left"). href= "Baidu";
document.getElementById ("Os_right"). href= "Baidu";
}
</script>
</body>
Article Source: Micro-Note _ blog
JS dynamically display Web page content based on access terminal type