基于当前浏览器的宽度和高度的JavaScript CSS选择
[英]JavaScript CSS Selection based on current Browser's Width and Height
问题描述
Ok I typically try not to ask questions, and I have been stuck on this for over 20 hours... This kind of sucks... 
好吧，我通常不问任何问题，而且我已经坚持了20多个小时...这种糟透了...
Anyways I am trying to create a JavaScript that detects the browser resolution, and based on the browser resolution a comparison statement selects the most appropriate CSS for the page reload. 无论如何，我都试图创建一个检测浏览器分辨率的JavaScript，并根据浏览器分辨率，比较语句为页面重新加载选择最合适的CSS。 I know its easier to use percentages, but for what this project contains this can not be done. 我知道它易于使用的百分比，但是对于此项目包含的内容，这是无法完成的。 So I am stuck writing something basic, and can't seem to find the error for some retarded reason... 所以我坚持写一些基本的东西，并且由于某些迟钝的原因似乎找不到错误...
Everything works smoothly up to the point of the comparison statement. 一切工作顺利进行到比较语句为止。
Here is the script: 这是脚本：
</head>
<script type="text/javascript">
function smallTest() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
}
if ((myWidth == 1280) && (myHeight == 768))
{document.write("<link href='css/Foo.1280.800.css' rel='stylesheet' type='text/css'>");}
else if (( myWidth == 800) && ( myHeight == 600))
{ document.write("<link href='css/Foo.1024.768.css' rel='stylesheet' type='text/css'>");}
else if (( myWidth == 1024) && ( myHeight == 768))
{ document.write("<link href='css/Foo.1024.768.css' rel='stylesheet' type='text/css'>");}
else if ( (myWidth == 1280) && ( myHeight == 1040))
{document.write("<link href='css/Foo.1280.1040.css' rel='stylesheet' type='text/css'>");}
else if (( myWidthh == 1600) && ( myHeight == 900))
{document.write("<link href='css/Foo.1600.900.css' rel='stylesheet' type='text/css'>");}
else if (( myWidth == 1920) && ( myHeight == 1080))
{document.write("<link href='css/Foo.1920.1080.css' rel='stylesheet' type='text/css'>");}
else if ( (myWidth == 1920) && ( myHeight == 1200))
{ document.write("<link href='css/Foo.1920.1200.css' rel='stylesheet' type='text/css'>");}
</script>
<body window.onload="smallTest()">
3 个解决方案
解决方案1
0 2011-05-20 20:20:29
Don't check for exact sizes. 不要检查确切的大小。 Everyone's browser window is going to be a different size and you're not likely to get too many users who are at an exact match for your css. 每个人的浏览器窗口的大小都将不同，并且您不会获得太多与CSS完全匹配的用户。
Do relative comparisons instead: 进行相对比较：
if (width < 800) && (height < 600) {
use "microscopic" page layout
} else {
....
}
You COULD check for the actual screen resolution, using screen.width and screen.height , but again, not everyone will have a standard-sized screen. 您可以使用screen.width和screen.height来检查实际的屏幕分辨率，但并非所有人都拥有标准尺寸的屏幕。 If they're running inside a VM, their screen resolution may the size of the window the VM's displaying inside of, which is not likely to be an exact match to a standard screen resolution. 如果它们在VM内运行，则其屏幕分辨率可能是VM在其中显示的窗口的大小，这不可能与标准屏幕分辨率完全匹配。
解决方案2
0 2011-05-20 20:24:20
You're confusing window size with screen resolution. 您将窗口大小与屏幕分辨率混淆了。 What you're getting is the resolution of the window , but you're trying to compare it to the resolution of the screen , which will never match. 您得到的是窗口的分辨率，但是您试图将其与屏幕的分辨率相比较，后者将永远不会匹配。
window.screen has information about the screen resolution if you happen to want that, but I would strongly recommend against using it, and instead just doing looser conditions: 如果您碰巧希望window.screen拥有有关屏幕分辨率的信息，但是我强烈建议您不要使用它，而只是在宽松的条件下使用：
if((myWidth >= 800) && (myWidth >= 600)){
...
}else if((myWidth >= 1024) && (myHeight >= 768)){
...
}
Although since those numbers are based on screen resolution, the height will always be less and the width will almost always be less, so you may be better off with just: 尽管由于这些数字是基于屏幕分辨率的，所以高度将始终较小，而宽度将始终较小，因此，仅使用以下方法可能会更好：
if(myWidth >= 750){
...
}else if(myWidth >= 950){
...
}
解决方案3
0 2011-05-25 19:22:17
Here is the script solution: 这是脚本解决方案：
Description: determines the browsers width and height, and based on the resolution it provides a CSS script that will meet it's needs th best. 描述：确定浏览器的宽度和高度，并基于分辨率提供一个CSS脚本，该脚本可以最好地满足其需求。 Great for information displaying purposes requiring exact sizes for monitors in use. 非常适合信息显示目的，要求所用显示器的尺寸正确。
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth )
{
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
if ( winW < 801)
{ document.write("<link href='css/xxxxxxxxxxxxxxx.css' rel='stylesheet' type='text/css'>");}
else if (( winW <= 1024) && ( winW > 801))
{
if (winH >= 768)
{document.write("<link href='css/xxxxxxxxxxxxxxx.css' rel='stylesheet' type='text/css'>");}
else if (winH < 768)
{document.write("<link href='css/xxxxxxxxxxxxxxx.css' rel='stylesheet' type='text/css'>");}
}
else if ((winW <= 1280) && (winW > 1024))
{
if (winH >=801)
{document.write("<link href='css/xxxxxxxxxxxxxxx.css' rel='stylesheet' type='text/css'>");}
else if (winH < 801)
{document.write("<link href='css/xxxxxxxxxxxxxxx.css' rel='stylesheet' type='text/css'>");}
}
else if (( winW <= 1600) && ( winW > 1280))
{
if (winH >=900)
{document.write("<link href='css/xxxxxxxxxxxxxxx.css' rel='stylesheet' type='text/css'>");}
else if (winH < 900)
{document.write("<link href='css/xxxxxxxxxxxxxxx.css' rel='stylesheet' type='text/css'>");}
}
else if ( winW > 1600)
{
if (winH >=1200)
{document.write("<link href='css/xxxxxxxxxxxxxxx.css' rel='stylesheet' type='text/css'>");}
else if (winH < 1200)
{document.write("<link href='css/xxxxxxxxxxxxxxx.css' rel='stylesheet' type='text/css'>");}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.