不同浏览器或者屏幕的兼容问题（几个简单的应对方法）

   最近做了一段时间的网站，对于不同浏览器的访问和屏幕的大小是一个必须要考虑的问题，下面有几个简单的方式，对于时间紧迫而且对页面没有太大动画要求的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>

或者使用css直接检测：

<link rel="stylesheet" type="text/css" media="screen and (max-width:400px) and (max-device-width:600px)" href="xxx.css">

响应式布局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*/

}

 

以上两种方式，可以解决一些简单问题，如果要了解更复杂的兼容，适配问题，还得慢慢积累。。。

 

转载于:https://www.cnblogs.com/jlj9520/p/4844097.html