根据浏览器分辨率不同自动调用不同CSS

最新推荐文章于 2022-06-13 22:50:31 发布
最新推荐文章于 2022-06-13 22:50:31 发布
阅读量774 收藏 3
点赞数
分类专栏： .NET实用技术 文章标签： 浏览器 firefox css ie function javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heqi915/article/details/1794259
版权
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";

ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
//如果浏览器为其他
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}

function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}

function setActiveStyleSheet(title){
  document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";

ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//如果浏览器为Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
//如果浏览器为其他
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}

function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}

function setActiveStyleSheet(title){
  document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</SCRIPT>
 
heqi915
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
判断浏览器类型屏幕分辨率自动调用不同CSS的代码
09-24
判断浏览器类型屏幕分辨率自动调用不同CSS的代码 打开后复制到HTML文件里运行.
JS判断浏览器分辨率调用不同css样式
11-09
JS判断浏览器分辨率调用不同css样式,网上搜集的，难免有误，呵呵，敬请谅解。
根据浏览器和分辨率调用CSS代码
zgqtxwd的专栏
04-30 325
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
(转)能够根据屏幕分辨率自动调用不同CSS的JS代码
翔飞
01-27 244
[code="javascript"] if(window.screen.width1024){ document.write(""); } [/code]
如何根据浏览器和分辨率调用不同的CSS代码
xiaoyi20的专栏
06-08 1141
作者：海水 发布时间：06-03-20 浏览次数：148 [大 中 小] 　　网页设计中往往会遇到这样一个问题，不同用户对象使用不同浏览器以及不同的分辨率浏览网页时他们所看到的东西与我们的初衷有很
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
10-31
### 知识点详解：根据判断浏览器类型及屏幕分辨率自动调用不同CSS的代码 在Web开发中，针对不同浏览器和不同的屏幕分辨率提供定制化的样式表（CSS）是一种提升用户体验的有效方式。本文将深入探讨如何通过...
JS判断浏览器分辨率自动调用不同CSS
05-30
"JS判断浏览器分辨率自动调用不同CSS"是一个实现响应式布局的技术手段，通过JavaScript检测浏览器窗口的分辨率，并据此加载相应的CSS样式表。这种技术尤其适用于多设备兼容性需求高的项目。 首先，我们需要了解...
判断用户浏览器及分辨率调用不同的CSS样式文件
01-21
一般我们可以通过下面的代码判断分辨率 复制代码代码如下: [removed] <!– Begin function redirect...DIV CSS教程：判断用户分辨率调用不同的CSS样式文件 （未测试 来自网络 请自行验证） 复制代码代码如下: var
css判断不同分辨率显示不同宽度布局实现自适应宽度
09-25
CSS判断不同分辨率浏览器（显示屏幕）显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断，但IE9以下版本不支持CSS3技术，这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局
CSS，我可以写 if/else 语法了？
粉丝们务必加入微信粉丝群
10-28 2345
作者：Kenton de Jong 译者：前端小智 来源：codingnconcept 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 我在 2011 年开始写CSS的时候），从来没有怀疑过这种语言会发生多大的变化。我还记得使用PIE.htc 让 border-radius 适配所有浏览器，我的同事做了一个PHP脚本，生.
css中IE判断语句 if !IE
01-19
1. <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–> 2. <!–[if IE]> 所有的IE可识别 <![endif]–> 3. <!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–> 4. <!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–> 5. <!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–> 6. <!–[if IE 6]> 仅IE6可识别 <![endif]–> 7. <!–[if lt IE 6]> IE6以及IE6以下版本可识别 <!
html如何加if条件,CSS if条件
weixin_39595310的博客
06-10 845
IE的CSS if条件Hack-css hack通过CSS5为各人说明注解DIV+CSS中if前提hack知识与教程实例目录Css if hack前提语法DIV+CSS if实例if前提hack总结1、Css if hack前提语法仅全数的WIN琐细自带IE可识别只要IE5.0大约识别IE5.0包换IE5.5均或者识别仅IE6可识别IE6以及IE6以下的IE5.x都可识别仅IE7可辨认IE7以及...
用js实现根据不同的分辨率和浏览器调用不同的css文件
Hi_Panda
05-23 3747
方法一：（根据ID设定） if (screen.width == "800") { document.getElementById("MyCSS").href="800.css"; document.getElementById("xinxi").innerHTML="你的分辨率是800，系统自动为你处理为最佳显示模式。"; }  else if
一个高级 CSS 面试题：在 CSS 中实现 if-else
web前端开发
06-13 283
英文 | https://medium.com/frontend-canteen/an-advanced-css-interview-question-implement-if-else-in-css-bb681d786d76翻译 | 杨小爱我的一个朋友在最近的一次面试中遇到了一个有趣的 CSS 面试问题。当我第一次看到这个问题时，我认为这是一个常见的CSS问题。然而，经...
自适应屏幕大小的网页
csai008hua的博客
06-27 3833
二、允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。 　　 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
css根据分辨率显示不同的css
热门推荐
liukai6的博客
04-16 1万+
css判断不同分辨率显示不同宽度布局实现自适应宽度 CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。 随着发展，越来越多的电脑用户显示屏分辨率越来越高，但有的用户还是使用10...
CSS中IE的IF条件使用注释
lyd518的专栏
10-17 1034
 在CSS布局中，还常常用到IE Hack。if IE条件注释的使用就起着很大的作用。if IE什么意思呢？下面就列举了一些在CSS常见的HACK控制语句。 除IE外都可识别 所有的IE可识别 只有IE5.0可以识别 仅IE5.0与IE5.5可以识别 IE5.0以及IE5.0以上版本都可以识别 仅IE6可识别 IE6以及IE6以下版本可识别 I
css hacks 中的 if注释
tiger.passion
05-13 146
  if条件是css hacks中经常会使用到一种hack，其语法归纳如下: 指定条件格式 &lt;!--[if condition]&gt; HTML &lt;![endif]--&gt; 非条件格式 &lt;!--[if !condition]&gt;&lt;![IGNORE[--&gt;&lt;![IGNORE[]]&gt; HTML &lt;!--&lt;![endif]--&gt;...
解决前端常见的浏览器兼容问题
最新发布
05-24
前端常见的浏览器兼容问题可以分为以下几类： 1. HTML/CSS兼容性问题：不同浏览器对HTML/CSS标准的支持程度不同，可能导致页面在不同浏览器上显示不同的效果。解决方法可以使用CSS Reset或Normalize.css等库来重置样式，统一浏览器的表现。 2. JavaScript兼容性问题：不同浏览器对JavaScript语法的支持也不同，可能导致某些功能在某些浏览器上无法正常运行。解决方法可以使用polyfill或者使用ES6的新特性，再用Babel转换成ES5的语法。 3. DOM/BOM兼容性问题：不同浏览器对DOM/BOM的支持也有所区别，可能会导致某些页面元素无法正确操作。解决方法可以使用jQuery等框架来封装DOM/BOM的操作，统一浏览器的表现。 4. 跨域问题：不同浏览器对跨域访问的限制也不同，可能导致某些资源无法加载或者接口无法正常调用。解决方法可以使用JSONP、CORS、代理等方式来解决跨域问题。 5. 移动端兼容性问题：移动端浏览器和PC端浏览器也有一些差异，可能导致页面在移动端显示不正常。解决方法可以使用响应式布局、媒体查询等技术来适配不同屏幕大小和分辨率的设备。 总之，解决浏览器兼容性问题需要综合考虑不同的因素，并采用不同的方法进行解决。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值