css 判断浏览器谷歌(js判断chrome浏览器)

今天给各位分享css 判断浏览器谷歌的知识,其中也会对js判断chrome浏览器进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

css 判断浏览器谷歌(js判断chrome浏览器)

本文目录

  1. 判断访问的是pc还是移动端然后调用不同的css样式
  2. iframe在谷歌浏览器中与在ie、火狐中显示不一致问题!
  3. html css的代码如何让它兼容到ie9浏览器,最简单的方法

一、判断访问的是pc还是移动端然后调用不同的css样式

第一种方式:利用js判断设备类型,应用不同样式文件

<htmlxmlns="">

<title>JS判断设备类型,应用不同css文件</title>

<linkrel="stylesheet"type="text/css"href="style_A.css"/>

<scripttype="text/javascript">

varu=navigator.userAgent,app=navigator.appVersion;

trident:u.indexOf('Trident')>-1,

presto:u.indexOf('Presto')>-1,

webKit:u.indexOf('AppleWebKit')>-1,

gecko:u.indexOf('Gecko')>-1&&u.indexOf('KHTML')==-1,

mobile:!!u.match(/AppleWebKit.*Mobile.*/),

ios:!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/),

android:u.indexOf('Android')>-1||u.indexOf('Linux')>-1,

iPhone:u.indexOf('iPhone')>-1,

iPad:u.indexOf('iPad')>-1,

//是否web应该程序,没有头部与底部

webApp:u.indexOf('Safari')==-1

language:(navigator.browserLanguage||navigator.language).toLowerCase()

if(browser.versions.mobile||browser.versions.ios||browser.versions.android||browser.versions.iPhone||browser.versions.iPad){ cssChange();

varlink=document.getElementsByTagName('link')[0];

//PC端应用的样式文件:style_A.css

alert('当前应用样式文件是:'+link.getAttribute('href'));

link.setAttribute('href','style_B.css');

//Mobile端应用样式文件:style_B.css

alert('当前应用样式文件是:'+link.getAttribute('href'));

</html>

第二种方式:利用css3的媒体查询,在不同的分辨率下,调用不同的css文件

第二种方式:利用css3的媒体查询,在不同的分辨率下,调用不同的css文件

<htmlxmlns="">

<title>用媒体查询做自适应页面</title>

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>

<linkrel="stylesheet"type="text/css"href="styleA.css"media="screenand(min-width:320px)and(max-width:480px)">

<linkrel="stylesheet"type="text/css"href="styleB.css"media="screenand(min-width:480px)and(max-width:600px)">

<linkrel="stylesheet"type="text/css"href="styleC.css"media="screenand(min-width:600px)and(max-width:800px)">

<linkrel="stylesheet"type="text/css"href="styleD.css"media="screenand(min-width:800px)">

styleA.css中样式为//.div_1{width:320px;border:1pxsolidred}

styleB.css中样式为//.div_1{width:480px;border:1pxsolidblue}

styleC.css中样式为//.div_1{width:600px;border:1pxsolidpink}

styleD.css中样式为//.div_1{width:800px;border:1pxsolidblack}

当屏幕宽度介于320px与480px之间时div元素宽度为320px,边框为红色

当屏幕宽度介于480px与600px之间时div元素宽度为480px,边框为蓝色

当屏幕宽度介于600px与800px之间时div元素宽度为600px,边框为粉色

当屏幕宽度大于800px时div元素宽度为800px,边框为黑色

二、iframe在谷歌浏览器中与在ie、火狐中显示不一致问题!

尊敬的用户,您好!很高兴为您答疑

您说的这个问题应该不是iframe的问题,这实际上是上传控件的问题。而控件是内建于浏览器内核中的,所以您如果期望实现外观一致,只能求助于利用js进行上传控件的重写。比较常见的方式是,存放一个隐藏的上传控件,然后通过修饰好外观的input等控件向其内部传值和注入,当然,最好的办法还是使用基于jQuery的上传插件,如:jUploader等。

要让file在各个浏览器显示统一,用js脚本。基本步骤:

1、通过文本框和按钮去模拟一个input type=”file”。

2、把input="file"做成透明,用定位完全盖住文本框和按钮。

3、当input type=”file”的onchange的时,用js将文本框的值设置成input type=”file”的值。

希望我的回答对您有所帮助,如有疑问,欢迎继续咨询我们。

三、html css的代码如何让它兼容到ie9浏览器,最简单的方法

用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10中的各种兼容性问题。

在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整。现在百度与谷歌都有了一行解决这种兼容性的代码了。如下面的。

百度也应用了这种方案去解决IE的兼容问题

2<htmlxmlns=;

4<metahttp-equiv=Content-Typecontent=“text/html;charset=utf-8″>

5<metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7>

6<title>百度一下,你就知道</title>

7<script>varwpo={start:newDate*1,pid:109,page:‘superpage’}</script>

<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

可以打开百度,右键查看源码看下!我们可以看下文件头是否存在这样一行代码!

这句话的意思是强制使用IE7模式来解析网页代码!

8<metahttp-equiv=“X-UA-Compatible”content=“IE=8″>

2. Google Chrome Frame也可以让IE用上Chrome的引擎:

9<metahttp-equiv=“X-UA-Compatible”content=“chrome=1″/>

10<metahttp-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″><!– IE7 mode–>

12<metahttp-equiv=“X-UA-Compatible”content=“IE=7″><!– IE7 mode–>

4.强制IE8使用IE6或IE5模式来解析

13<metahttp-equiv=“X-UA-Compatible”content=“IE=6″><!– IE6 mode–>

14<metahttp-equiv=“X-UA-Compatible”content=“IE=5″><!– IE5 mode–>

5.如果一个特定版本的IE支持所要求的兼容性模式多于一种,如:

15<metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/>

二.在网网站服务器上指定预设兼容性模式来解决这个办法

当然如果服务器是自己的话,可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。

录入,下列的 web.config文件使Microsoft Internet Information Services(IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

另外还有一起其他的解决方案,例如google的

ie7– js中是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器,支持更多的W3C标准,支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题,并使得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式(推荐)

17<script src=”(beta)/IE7.js” type=”text/javascript”></script>

20<script src=”(beta)/IE8.js” type=”text/javascript”></script>

使IE5,IE6,IE7,IE8兼容到IE9模式

23<script src=”(beta4)/IE9.js”></script>

关于本次css 判断浏览器谷歌和js判断chrome浏览器的问题分享到这里就结束了,如果解决了您的问题,我们非常高兴。

声明:信息资讯网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流,版权归原作者东方体育日报所有。若您的权利被侵害,请联系 删除。

本文链接:http://www.gdxhedu.com/news/148089.html