Fatal编程技术网
  • javascript/
  • 基于当前浏览器的JavaScript CSS选择&x27；s的宽度和高度

基于当前浏览器的JavaScript CSS选择&x27；s的宽度和高度

javascript css

基于当前浏览器的JavaScript CSS选择&x27；s的宽度和高度,javascript,css,javascript-events,browser-detection,Javascript,Css,Javascript Events,Browser Detection,好吧，我通常尽量不提问，我已经在这上面呆了20多个小时了。。。这种东西很烂 无论如何，我试图创建一个检测浏览器分辨率的JavaScript，并根据浏览器分辨率使用一个比较语句为页面重新加载选择最合适的CSS。我知道它更容易使用百分比，但对于这个项目所包含的内容，这是无法做到的。所以我被困在写一些基本的东西上，似乎因为一些迟钝的原因找不到错误 在对比声明中，一切都很顺利 以下是脚本： </head> <script type="text/javascript"> func

好吧，我通常尽量不提问，我已经在这上面呆了20多个小时了。。。这种东西很烂

无论如何，我试图创建一个检测浏览器分辨率的JavaScript，并根据浏览器分辨率使用一个比较语句为页面重新加载选择最合适的CSS。我知道它更容易使用百分比，但对于这个项目所包含的内容，这是无法做到的。所以我被困在写一些基本的东西上，似乎因为一些迟钝的原因找不到错误

在对比声明中，一切都很顺利

以下是脚本：

</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()">


函数测试（）{
var myWidth=0，myHeight=0；
if（typeof（window.innerWidth）=“number”）{
//非IE
myWidth=window.innerWidth；
myHeight=window.innerHeight；
}else if（document.documentElement&（document.documentElement.clientWidth | | document.documentElement.clientHeight））{
//IE 6+处于“标准兼容模式”
myWidth=document.documentElement.clientWidth；
myHeight=document.documentElement.clientHeight；
}else if（document.body&（document.body.clientWidth | | document.body.clientHeight））{
//IE4兼容
myWidth=document.body.clientWidth；
myHeight=document.body.clientHeight；
}
}
如果（（myWidth==1280）和&（myHeight==768））
{document.write（“”；}
否则，如果（（myWidth==800）和（&（myHeight==600））
{document.write（“”；}
如果（（myWidth==1024）和&（myHeight==768））
{document.write（“”；}
否则如果（（myWidth==1280）和（&（myHeight==1040））
{document.write（“”；}
否则，如果（（myWidthh==1600）和（&（myHeight==900））
{document.write（“”；}
否则如果（（myWidth==1920）和（&（myHeight==1080））
{document.write（“”；}
否则，如果（（myWidth==1920）和（&（myHeight==1200））
{document.write（“”；}
不要检查确切的尺寸。每个人的浏览器窗口都会有不同的大小，你不太可能有太多的用户与你的css完全匹配

改为进行相对比较：

if (width < 800) && (height < 600) {
      use "microscopic" page layout
} else {
    ....
}

if（宽度<800）和&（高度<600）{
使用“微观”页面布局
}否则{
....
}
您可以使用
screen.width
和
screen.height
检查屏幕的实际分辨率，但是，并非每个人都有标准大小的屏幕。如果它们在虚拟机内运行，其屏幕分辨率可能与虚拟机显示的窗口大小相同，这可能与标准屏幕分辨率不完全匹配。

不要检查确切的大小。每个人的浏览器窗口都会有不同的大小，你不太可能有太多的用户与你的css完全匹配

改为进行相对比较：

if (width < 800) && (height < 600) {
      use "microscopic" page layout
} else {
    ....
}

if（宽度<800）和&（高度<600）{
使用“微观”页面布局
}否则{
....
}
您可以使用
screen.width
和
screen.height
检查屏幕的实际分辨率，但是，并非每个人都有标准大小的屏幕。如果它们在虚拟机内运行，则其屏幕分辨率可能与虚拟机显示的窗口大小相同，这可能与标准屏幕分辨率不完全匹配。

您将窗口大小与屏幕分辨率混淆了。您得到的是窗口的分辨率，但您试图将其与屏幕的分辨率进行比较，后者永远不会匹配

window.screen
提供了有关屏幕分辨率的信息（如果您碰巧需要），但我强烈建议您不要使用它，而只需执行更宽松的条件：

if((myWidth >= 800) && (myWidth >= 600)){
   ...
}else if((myWidth >= 1024) && (myHeight >= 768)){
   ...
}
尽管这些数字基于屏幕分辨率而定，但高度始终较小，宽度几乎始终较小，因此您最好只使用以下选项：

if(myWidth >= 750){
    ...
}else if(myWidth >= 950){
    ...
}
你把窗口大小和屏幕分辨率搞混了。您得到的是窗口的分辨率，但您试图将其与屏幕的分辨率进行比较，后者永远不会匹配

window.screen
提供了有关屏幕分辨率的信息（如果您碰巧需要），但我强烈建议您不要使用它，而只需执行更宽松的条件：

if((myWidth >= 800) && (myWidth >= 600)){
   ...
}else if((myWidth >= 1024) && (myHeight >= 768)){
   ...
}
尽管这些数字基于屏幕分辨率而定，但高度始终较小，宽度几乎始终较小，因此您最好只使用以下选项：

if(myWidth >= 750){
    ...
}else if(myWidth >= 950){
    ...
}
以下是脚本解决方案：

描述：确定浏览器的宽度和高度，并根据分辨率提供一个CSS脚本，以满足其最佳需求。非常适用于需要精确尺寸的显示器的信息显示目的

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'>");}
     }

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；
}
如果（winW<801）
{document.write（“”；}
否则如果（（winW 801））
{ 
如果（winH>=768）
{document.write（“”；}
else if（winH<768）
{document.write（“”；}
}
else if（（winW 1024））
{ 
如果（winH>=801）
{document.write（“”；}
else if（winH<801）
{document.write（“”；}
}
否则如果（（winW 1280））
{ 
如果（winH>=900）
{document.write（“”；}
否则如果（winH<900）
{document.write（“”；}
}      
否则如果（winW>1600）
{ 
如果（winH>=1200）
{document.write（“”；}