[英]apply classname (css) based on screen resolution
I have a problem when I am working on resolution base application. 我在处理分辨率基础应用程序时遇到问题。
If I have 1024 by 768 resolution my application should be 100% (table Layout). 如果我有1024 x 768分辨率,我的应用程序应该是100%(表格布局)。 If I have above 1024 by 768 resolution the application should be in center align (table width is 80%).
如果我的分辨率高于1024 x 768,则应用程序应处于居中对齐状态(表格宽度为80%)。
function MOSTRA() {
var SCR = screen.availWidth;
var BRW = window.outerWidth;
if (BRW < SCR) {
document.getElementById('sample').className = 'maintable';
} else {
document.getElementById('sample').className = 'maintable1';
}
}
window.onresize = MOSTRA;
window.onload = MOSTRA;
I have used the above code but this is not working. 我使用了上面的代码,但这不起作用。
Hi all i have checked with putting alert in required place. 大家好我已经检查过所需的地方放置警报。 Now i know where the problem is occurring in window.outerWidth it seems because when i alert in that area i am getting undefined in IE.
现在我知道window.outerWidth中出现问题的位置,因为当我在该区域发出警报时,我在IE中未定义。 It seems Ie is not supporting outerwidth.
似乎即不支持外部空间。 I have taken the above code from the below link.
我从以下链接中获取了上述代码。
http://jsfiddle.net/Guffa/q56WM/ http://jsfiddle.net/Guffa/q56WM/
Please helpe me. 请帮帮我
This is a urgent issue 这是一个紧迫的问题
Thanks in advance 提前致谢
Use CSS3 Media Queries : 使用CSS3媒体查询 :
@media screen and (min-width: 1024px) and (min-width: 768px)
{
/* Center table! */
}
Also possible: 也可能:
<link rel="stylesheet" media="screen and (min-width: 1024px) and (min-width: 768px)" href="example.css" />
JS variant (because OP didn't want CSS 3): JS变种(因为OP不想要CSS 3):
if (window.screen.width >= 1024 && window.screen.width >= 768) {
document.head.innerHTML += '<link rel="stylesheet" href="centerTable.css" type="text/css" />'
}
务实地包括基于显示宽度的样式表,媒体类型: http : //www.w3.org/TR/css3-mediaqueries/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.