<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.move:hover {
font-size: 50px;
transform: rotate(90deg);
}
.move {
/*transition: font-size 2s;*/
transition: all 2s;
/*transition: transform 2s;*/
height: 50px;
width: 50px;
}
.d2 {
margin: 20px;
animation: mykeyframe 2s infinite;
width: 200px;
height: 200px;
}
@keyframes mykeyframe {
from {
font-size: 20px;
transform: rotate(0deg);
}
to {
font-size: 50px;
transform: rotate(70deg);
}
}
</style>
</head>
<body>
<div class="move">123456</div>
<div class="d2">
一根草
</div>
<script type="text/javascript">
// 对浏览器的UserAgent进行正则匹配，不含有微信独有标识的则为其他浏览器
var useragent = navigator.userAgent;
if(useragent.match(/WindowsWechat/) == 'WindowsWechat' || useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
// 这里警告框会阻塞当前页面继续加载
//alert('已禁止本次访问：您必须使用微信内置浏览器访问本页面！');
document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
}
</script>
</body>
</html>
测试了安卓手机和电脑浏览器，Windows微信，if条件适应。
没有苹果手机，没有经过测试，如果有问题请回复，谢谢。
网友评论