王筝的博客
ruby学习

封装一下可以直接用啦。

var uaFanction = function(
var UA = window.navigator.userAgent,
IsAndroid = (/Android|HTC/i.test(UA) || !! (window.navigator[‘platform’] + ”).match(/Linux/i)),
IsIPad = !IsAndroid && /iPad/i.test(UA),
IsIPhone = !IsAndroid && /iPod|iPhone/i.test(UA),
IsIOS = IsIPad || IsIPhone;
if(IsIOS){
window.location.href=’IOS';
}
if(IsAndroid){
window.location.href=’Android';
}
)

======

或者直接在script块里写,

var UA = window.navigator.userAgent,
IsAndroid = (/Android|HTC/i.test(UA) || !! (window.navigator[‘platform’] + ”).match(/Linux/i)),
IsIPad = !IsAndroid && /iPad/i.test(UA),
IsIPhone = !IsAndroid && /iPod|iPhone/i.test(UA),
IsIOS = IsIPad || IsIPhone;
if(IsIOS){
window.location.href=’IOS';
}
if(IsAndroid){
window.location.href=’Android';
}

正如很多小伙伴们所知道的,楼主最近在开发移动端的响应式布局的自适应页面了,现在分享一个刚写完的小demo

html:

<!doctype html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no”>
<meta name=’apple-mobile-web-app-capable’ content=’yes’ />
<meta name=”format-detection” content=”telephone=no” />
<meta http-equiv=’Content-Type’ content=’textml;charset=UTF-8′ />
<title>移动端</title>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
</head>
<body>
<div class=”img”> <img src=”images/img-1.jpg” /></div>
<script type=”text/javascript”>
function imgAnimation(){
var imgObj = document.getElementsByTagName(“div”)[0];
imgObj.onclick =function(){
if(imgObj){
imgObj.className = “img imgAnimation”;
}
}
}
imgAnimation();
</script>
</body>
</html>

==============

css

@charset “utf-8″;
/* CSS Document */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,table,tbody,p,th,td{ -webkit-text-size-adjust:none; margin: 0; padding: 0; border: none; -webkit-tap-highlight-color:rgba(0,0,0,0); font-size: 1em; font-family:”Microsoft Yahei”,”微软雅黑”,Tahoma,Arial,Helvetica ,STHeiti; color: #4c4948; }
html,body{ min-height:100%; }
img,input,button,a,select,textarea{ margin: 0; padding: 0; resize:none; border:none; outline:none; }
ol,ul { list-style:none; }
h1,h2,h3,h4,h5,h6,p,em{ font-size:100%; word-wrap:break-word; font-weight: normal; font-style: normal; }
a:active, a:focus{ outline:none; }
button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0; }
table{ border-collapse:collapse; border-spacing:0; }
.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; font-size:0; }
.clearfix{ zoom:1; }
a{ color: #4c4948; text-decoration: none; }

.img{ width: 190px; height: 120px; padding: 3px; border: 1px solid #ccc; position: absolute;z-index: 12; top: 50px; left: 50%;
margin-left: -95px; }
/*动画名字, 动画运行的时间,alternate平滑过渡, infinite是反复执行*/
.imgAnimation{
animation-name: imgAnimation;
animation: imgAnimation 2s alternate infinite;
-webkit-animation: imgAnimation 2s alternate infinite;
-moz-animation: imgAnimation 2s alternate infinite;
}
/*
@-webkit-keyframes imgAnimation{
0%{ left: -198px}
100%{ left: 50%;}
}
@-moz-keyframes imgAnimation{
0%{ left: -198px}
100%{ left: 50%;}
}
*/

@-webkit-keyframes imgAnimation{
0%{ opacity: 0}
50%{ opacity: 0.5}
100%{ opacity: 1}
}
@-moz-keyframes imgAnimation{
0%{ opacity: 0}
50%{ opacity: 0.5}
100%{ opacity: 1}
}

css中屏蔽的那部分代码就是图片飞入的css,简单实用,比当年手写js要方便的多,渐渐爱上css3了, 么么哒