根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码 - 网站与服务器 - 通际网站开发交流
你现在的位置： -
作者 : duzhiyun | 分类 : 网站与服务器 | 超过
人围观 | 已有 <font color="# 人留下了看法
css媒体查询php、asp、js判断客户端输出对应的样式------------------- 1.媒体查询方法在 css 里面这样写 --------------------@media screen and (min-width: 320px) and (max-width: 480px){在这里写小屏幕设备的样式}@media only screen and (min-width: 321px) and (max-width: 1024px){这里写宽度大于321px小于1024px的样式(一般是平板电脑)}@media only screen and (min-width: 1029px){这里写pc客户端的样式}------------------- 2.用js根据客户端输出对应样式 --------------------/*事实上用asp、php后台判断更保险，js在前端，有可能被用户禁止*/function loadCSS() {&if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) {&& &&& &document.write(&#39;&link href=&css/pad-phone.css& rel=&stylesheet& type=&text/css& media=&screen& /&&#39;);&& &}&& &else {&& &&& &document.write(&#39;&link href=&css/pc.css& rel=&stylesheet& type=&text/css& media=&screen& /&&#39;);&& &}}loadCSS();&&&------------------- 3.既判断分辨率，也判断浏览器-------------------应E.Qiang提议,重新完善代码，使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。代码如下：&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){//如果浏览器为Firefoxvar 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/&+}//--&&/SCRIPT&解释：var IE1024=&&;var IE800=&&;var IE1152=&&;var IEother=&&;引号里面分别填写，用户使用IE的时候并且分辨率为*600,要使用的css文件名.var Firefox1024=&&;var Firefox800=&&;var Firefox1152=&&;var Firefoxother=&&;引号里面分别填写，用户使用FF的时候并且分辨率为*600,要使用的css文件名.var Other1024=&&;var Other800=&&;var Other1152=&&;var Otherother=&&;引号里面分别填写，用户使用其他浏览器的时候并且分辨率为*600,要使用的css文件名.例子:不判断分辨率，只判断浏览器实现根据浏览器类型自动调用不同CSS。&SCRIPT LANGUAGE=&JavaScript&&&!--if (window.navigator.userAgent.indexOf(&MSIE&)&=1){&& &//如果浏览器为IEsetActiveStyleSheet(&default.css&);}else{if (window.navigator.userAgent.indexOf(&Firefox&)&=1){//如果浏览器为FirefoxsetActiveStyleSheet(&default2.css&);}else{//如果浏览器为其他setActiveStyleSheet(&newsky.css&);}}function setActiveStyleSheet(title){document.getElementsByTagName(&link&)[0].href=&style/&+}//--&&/SCRIPT&解释：如果浏览器为IE，则调用default.css如果浏览器为Firefox，则调用default2.css如果浏览器为其他，则调用newsky.css用法：放在&/head&前面即可。只要求判断根据屏幕宽度选择不同的CSS样式表。&script language=javascript&&!--if (screen.width == 800){document.write(&#39;&link rel=stylesheet type=&text/css& href=&css800.css&&&#39;)}else {document.write(&#39;&link rel=stylesheet type=&text/css& href=&css1024.css&&&#39;)}//--&&/script&本文出自
，转载时请注明出处及相应链接。本文Tags: &&&&&&JS判断不同分辨率调用不同的CSS样式文件
HTML文件代码：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/
charset=utf-8" /&
&title&不同分辨率调用不同的CSS样式文件&/title&
&link id="skin"
type="text/css" rel="stylesheet" rev="stylesheet"
media="all"&
type="text/javascript"&
var resolution_="css/default1.css";
//设置变量resolution_ 样式：default1.css
var resolution_="css/default2.css";
//设置变量resolution_ 样式：default2.css
var resolution_="css/default3.css";
//设置变量resolution_ 样式：default3.css
if((screen.width==1024)&&(screen.height==768)){
&document.getElementByIdx_x_x("skin").href=resolution_;
//判断分辨率是调用default1.css
if((screen.width==1280)&&(screen.height==1024)){
&document.getElementByIdx_x_x("skin").href=resolution_;
//判断分辨率是调用default2.css
if((screen.width==1600)&&(screen.height==900)){
&document.getElementByIdx_x_x("skin").href=resolution_;
//判断分辨率是调用default3.css
&document.getElementByIdx_x_x("skin").href=resolution_;
//否则 调用default1.css
class="default"&不同分辨率调用不同的CSS样式文件&/div&
CSS文件代码：
default1.css:
.default{ margin:0 padding:0; width:800 height:500
background-color:#F00;}
default2.css:
.default{ margin:0 padding:0; width:800 height:500
background-color:#Ff0;}
default3.css:
.default{ margin:0 padding:0; width:800 height:500
background-color:#CF3;}
把所有css文件全部放入一个css文件夹内，css文件夹与html文件是同层级，调整浏览器分辨率进行测试即可。。。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。(转)能够根据屏幕分辨率自动调用不同CSS的JS代码 - 翔飞 - ITeye技术网站
博客分类：
if(window.screen.width&=1024){
document.write("&link href='resource/css/global_1024.css' rel='stylesheet' type='text/css'&");
if(window.screen.width&1024){
document.write("&link href='resource/css/global_1366.css' rel='stylesheet' type='text/css'&");
浏览: 209151 次
来自: 南京
ireport的操作还是相对比较复杂的，帆软报表会相对简单一点 ...
把page-footer删除就是删除了页脚。那我要是想在报表底 ...
基于bootstrap样式的asp.net+plupload多 ...
preview点击后弹出来的，怎么是图片base编码后的值?
Exception in thread &main& ...怎么根据不同的分辨率加载不同的js_百度知道
怎么根据不同的分辨率加载不同的js
提问者采纳
$(window).js&/&} else if ((width &= 1366) && (width &= 1920){$(&&lt.attr(&js/script& &js//script src=&#jsA& }}$(function() {adjustStyle($(this);js/meta charset=&js/&&script&&#47!doctype html&jsC;jsB&不同分辨率调不同JS 效果&lt.&&gt&jsA;;src&jsB;/&js/title&gt.filter(&js/ src=&quot!--才调用改js--&);src&;src&#jsB&quot, &&gt，此时A不需要--&jsA;jsB;;&jsA&jquery-1, &&;);script&;});;/body&&#47.js&);script id=&quot.width()).js&script&});#jsA&} else {$(&head&script&gt.width());$(&&););&lt, &quot.js&jsA;html&gt!--才调用这个jsB.js&#jsC&& src=&utf-8&quot.filter(&body&gt.2;&););head&&lt.remove(&&&script id=&).js&&#47.js&title&gt.resize(function() {adjustStyle($(this);;&&&src&if (width & 1920)) {$(&quot.8;html&&&#47, &js/function adjustStyle(width) {width = parseInt(width)
网络工程师
其他类似问题
分辨率的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁