手机浏览提示CSS
手机浏览提示CSS，敬告，请不要使用让人悲催的IE浏览器，你会发现IE9以下版本都不可能看到效果，最好还是改用火狐或Chrome吧。如果用火狐仍然看不到效果的话，就把窗口拉小点试试！要求只有在手机浏览器尺寸才可以看到内容，技巧很简单只需要添加2段CSS就可以了，以下代码是以480PX为基准调试的。<!DOCTYPE HTML>
<!--[if lt IE 7 ]>
<html class=“ie ie6 no-js“ lang=“en“>
<![endif]-->
<!--[if IE 7 ]>
<html class=“ie ie7 no-js“ lang=“en“>
<![endif]-->
<!--[if IE 8 ]>
<html class=“ie ie8 no-js“ lang=“en“>
<![endif]-->
<!--[if IE 9 ]>
<html class=“ie ie9 no-js“ lang=“en“>
<![endif]-->
<!--[if gt IE 9]>
<!-->
<html class=“no-js“ lang=“en“>
<!--<![endif]-->
<!-- the “no-js“ class is for Modernizr. -->
<head data-template-set=“html5-reset“>
<meta charset=“utf-8“>
<meta name=“apple-mobile-web-app-capable“ content=“yes“>
<meta name=“apple-mobile-web-app-status-bar-style“ content=“black“>
<meta name=“viewport“ content=“user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0“>
<!-- CSS -->
<style>
@import url(“reset.css“) screen;
a {
text-decoration:none;
}
.wrapper {
width:100%; margin:0 auto;
}
.attation {
font-size: 24px;
line-height: 40px;
margin: auto;
padding-top: 200px;
text-align: center;
color: #5B5B5B;
}
@media screen and (min-width: 480px){
.mobile{
display:none;
}
}
@media screen and (max-width: 479px){
.attation{
display:none;
}
}
</style>
<title>手机浏览提示CSS</title>
</head>
<body>
<p class=“attation“>哈哈，看不到吧～把窗口拉小点试试！</p>
<div class=“wrapper mobile“>
<!-- STAR HEADER -->
<div id=“header“>
<h1><img src=“/jscss/demoimg/201205/for-mobile-browser-design.jpg“ alt=“手机浏览提示CSS“></h1>
</div>
</div>
<script type=“text/javascript“>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount‘, ‘UA-23292263-1‘]);
_gaq.push([‘_trackPageview‘]);
(function() {
var ga = document.createElement(‘script‘); ga.type = ‘text/javascript‘; ga.async = true;
ga.src = (‘https:‘ == document.location.protocol ? ‘https://ssl‘ : ‘http://www‘) + ‘.google-analytics.com/ga.js‘;
var s = document.getElementsByTagName(‘script‘)[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
发表评论