Question

我知道如何返回一个布尔值来判断用户是否在移动设备上，但我如何使用JavaScript来更改它并更改它使用的样式表（也许是HTML）文档？

Answer 1

没有必要为此使用JS - 您可以使用媒体查询根据设备类型，屏幕方向，屏幕分辨率等加载特定的CSS文件。

您可以在此处找到大量示例和解释： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

其中的一些例子：

<link rel="stylesheet" media="(min-width: 800px)" href="LargeScreen.css" />
<link rel="stylesheet" media="(max-width: 800px), handheld and (orientation: portarit)" href="Mobile.css" />

和jsFiddle演示 - 您可以根据视口大小看到div更改颜色： https://jsfiddle.net/4w13k9jp/

@media (max-width: 600px) {
  #box {
    background-color:red
  }
}
@media (min-width: 600px) {
  #box {
    background-color:blue
  }
}

Answer 2

使用css媒体查询更改颜色：

＆＃13;

#one {
    background-color: lightgreen;
    width:30%;
    height:100px;
}

@media only screen and (max-width: 500px) {
    #one {
        background-color: lightblue;
    }
}

＆＃13;

<div id="one"></div>

＆＃13;

你也可以删除一些元素

＆＃13;

function DeleteForId(id) {
    var elemento = document.getElementById(id);
    return elemento.parentNode.removeChild(elemento);
}




DeleteForId("segundoDiv");

＆＃13;

#primerDiv{
background:red;
  width:40px;
  height:40px;
}
 #segundoDiv{
background:blue;
  width:40px;
  height:40px;
}
.tercerDiv{
background:orange;
  width:40px;
  height:40px;
}

＆＃13;

<div id="primerDiv"></div>
<div id="segundoDiv"><img src="http://cdn01.ib.infobae.com/adjuntos/162/imagenes/014/014/0014014674.jpg" alt="Smiley face" height="42" width="42"></div>

<div class="tercerDiv"></div>

＆＃13;

Answer 3

或者，您可以使用javascript动态更改样式表

<head>
    <link id="style" rel=stylesheet href="large.css">

</head>






    function changeStyle(){
        if(window.innerWidth<900){
            document.getElementById("style").setAttribute("href","mobile.css");

       }else if((window.innerWidth)>900 &&(window.innerWidth)<1200){
         document.getElementById("style").setAttribute("href","medium.css");   
       }
        else 
              document.getElementById("style").setAttribute("href","large.css"); 
    }  
    window.onresize=changeStyle;
   changeStyle();

如果用户在移动设备上，如何更改样式表？

3 个答案: