最近做了一段时间的网站,对于不同浏览器的访问和屏幕的大小是一个必须要考虑的问题,下面有几个简单的方式,对于时间紧迫而且对页面没有太大动画要求的css可以采用。。。其实最开始对于做网站就应该想到一些响应式布局的实现,比如说如果刚开始在1366*768采用table标签来做网页的时候,可能到手机上缩小了分辨率,则会把table标签压的特别小;但是如果我们在刚开始用div来做表格的话可能效果会好一点,可以借用媒体查询把div网屏幕下方放,这种方式在bootstrap里面类似。
下面有几个小方法与大家分享一下(当你最后才发现其他浏览器或者手机上难看时)
1.针对与其他浏览器(大多数是IE6,7,8)重新写一个css样式表:
当写好样式表以后,利用js切换到该css,先检测浏览器为IE6,7,8时(在对应的link标签上加上ID属性):
if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.indexOf("6.")>=1){
alert("您使用的IE浏览器版本太低,建议用IE9以上版本浏览本网站!")
$("#page_css").attr("href", "/static/css/page_IE.css");
}
if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.indexOf("7.")>=1){
alert("您使用的IE浏览器版本太低,建议用IE9以上版本浏览本网站!")
$("#page_css").attr("href", "/static/css/page_IE.css");
}
if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.indexOf("8.")>=1){
alert("您使用的IE浏览器版本太低,建议用IE9以上版本浏览本网站!")
$("#page_css").attr("href", "/static/css/page_IE.css");
}
这样当js检测到当前浏览器为IE6,7,8时会把原来的css换掉。
2.如果用手机或者平板以及其他的非电脑访问网站时,可以借用js查询媒介的屏幕宽度,或者借用媒体查询写不同的css:
js代码:
<script>
if(screen.width <= 980){
alert("如果使用手机或平板浏览本网站会错过更多信息;详情请见电脑版!");
//或者利用上面的方式更换css或者js文件
}
</script>
响应式布局ss代码:
@media screen and (min-width:200px) and (max-width:480px) {
/*........写针对与手机的css*/
}
@media screen and (min-width:480px) and (max-width:980px) {
/*........写针对与平板的css*/
}
@media screen and (min-width:1700px) {
/*........写针对与大屏幕显示器的css*/
}
以上两种方式,可以解决一些简单问题,如果要了解更复杂的兼容,适配问题,还得慢慢积累。。。