手机浏览提示CSS
最近在做一个只支持手机浏览的网页,当然是使用HTML5/CSS3了,给此网页添加一条提示,要求只有在手机浏览器尺寸才可以看到内容,技巧很简单只需要添加2段CSS就可以了,以下代码是以480PX为基准调试的。文章最后有DEMO可以查看,如果你是使用PC/MAC浏览,请调节你窗口尺寸到480PX。
Step1. HTML
<body>
<p class="attention">哈哈,看不到吧~把窗口拉小点试试!</p>
<div class="wrapper mobile">
Step2. CSS
@media screen and (min-width: 480px){
.mobile{
display:none;
}
}
@media screen and (max-width: 480px){
.attention{
display:none;
}
}
#1
奇怪,480宽度上什么都没有,小于480的宽度倒是有,但是图片明显应该是480宽度的。再大的宽度就是显示那几个字了~
我chrome测试的,用的responsive design test~
你窗口算的那么准?
是自动的,responsive design test自动生成的几个预览~
http://www.douban.com/photos/photo/1543551414/
这里是截图。是我的浏览器的原因么?我是了linux和windows,都是这样,我用的chrome。
我测试过了,我这边是正常显示的,320/480都有显示。Win7,Chrome浏览器
我调整了下右上的Width only和Device sizes后就会出现。然后我把这个提示信息注释掉,就完美实现了。
我估计是这个测试网页不太支持这个尺寸信息提示,我们公司在手机专用测试平台完全兼容的。
哦,原来如此~
#2
专业知识,专业文章
您太过奖了,这里看客高手太多
#3
还没接触手机类。。。这css好
大叔也快点跟进了~
#4
收藏了
做为学习的教材。
辛苦楼主