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

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

}

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

时间: 2024-11-06 07:43:07

不同浏览器或者屏幕的兼容问题(几个简单的应对方法)的相关文章

前端浏览器JavaScript及CSS兼容总结

一. getElementById [标准参考] getElementById 是 Document 接口提供的方法,用于获取一个元素,该方法传入的参数应该是目标元素的 id 属性的值,目标元素的 id 是一个大小写敏感的字符串,并且该 id 在文档内应该是唯一的. [问题描述] 但是在 IE6 IE7 IE8(Q) 中,支持以 document.getElementById(elementName) 的方式获取 name 属性值为 elementName 的 A APPLET BUTTON F

Javascript&amp;Jquery获取浏览器和屏幕各种高度宽度方法总结及运用

<js篇> Javascript获取浏览器和屏幕各种高度宽度方法总结 document.body.clientWidth       //网页可见区域宽(body) document.body.clientHeight     //网页可见区域高(body) document.body.offsetWidth     //网页可见区域宽(body),包括border.margin等 document.body.offsetHeight    //网页可见区域宽(body),包括border.m

JS 获取浏览器和屏幕宽高信息(转载)

JS 获取浏览器和屏幕宽高信息 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:documen

智能手机操作系统、浏览器、屏幕尺寸

一.智能手机操作系统.浏览器.屏幕尺寸 NetMarketShare数据网站2015年9月份智能手机操作系统的市场份额排名. Android平台手机.IOS平台的iphone.黑莓(BlackBerry)各自内置的Web浏览器,如下: Android中的 Android Browser IOS中的 Mobile Safari BlackBerry中的 Webkit浏览器 智能手机屏幕分辨率/分辨率,如下: 商品名称:OPPOA31 屏幕尺寸:4.5英寸 分辨率:854×480 商品名称:中兴V5

Js获取当前浏览器支持的transform兼容写法

// 获取当前浏览器支持的transform兼容写法 function getTransfrom() { var transform = '', // document.createElement() 创建元素节点, divStyle = document.createElement('div').style, // 返回的是一组object对象,里面包含了transform // 可能涉及到的几种兼容性写法,通过循环,找出浏览器识别的那个 // 依次为: 全部.Safari 和 Chrome.

存在不同浏览器间的JS兼容总结

2016年2月19日个人博客文章--迁移到segmentfault 当我们在编写JS用于处理事件时,由于考虑到不同浏览器间Js代码兼容不同,代码不易记忆,于是做出如下整理.(当然以后还会增加更新的...) 示例代码如下: (1)阻止默认事件 obj.onclick=function(ev){ var event=ev||window.event; if(event.preventDefault){ event.preventDefault(); /*W3C标准*/ }else{ event.re

PC如何禁用网页在360浏览器里面禁止切换兼容模式

PC如何禁用网页在360浏览器里面禁止切换兼容模式 方法一 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 方法二 <meta name="renderer" content="webkit" /> 注意一下:斜杠前面加个空格 原文地址:https://www.cnblogs.com/jlfw/p/12222678.html

你做的页面在哪些浏览器测试过?这些浏览器的内核是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?(至少说3个)

IE内核浏览器:360,傲游,搜狗,世界之窗,腾讯TT 非IE内核浏览器:firefox opera safari chrome 1.就是ie6双倍边距的问题,在使用了float的情况下,不管是向左还是向右都会出现双倍,最简单的解决方法就是用display:inline;加到css里面去. 2.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,opera下

做web项目时对代码改动后浏览器端不生效的应对方法(持续更新)

做web项目时,常常会遇到改动了代码,但浏览器端没有生效,原因是多种多样的,我会依据我遇到的情况逐步更新解决的方法 1.执行的时候採用debug模式,普通情况下使用项目部署button右边那个button下的tomcat7中的run即可,假设使用的是serves中的run serves,这样的情况貌似不会自己主动编译 2.点击project菜单下的clean选项,在打开的窗体中选择你使用的项目,ok,这样会删除tomcat容器中关于该项目的一些信息,然后又一次部署,执行 3.删除电脑中tomca