仅在使用 weebly.com 的手机/平板电脑/桌面上显示 div答案

【问题标题】：Show div on only on mobile/tablet/desktop using weebly.com仅在使用 weebly.com 的手机/平板电脑/桌面上显示 div
【发布时间】：2015-12-08 22:50:13
【问题描述】：

我只想在移动设备上显示在桌面上看不到的特定 div，反之亦然。这段代码应该可以工作，但我似乎无法使用 weebly.com 让这段代码工作

<style>

@media all and (max-width: 959px) {

    .content .one{display:block;}
    .content .two{display:none;}
    .content .three{display:none;}

}

@media all and (max-width: 720px) {

    .content .one{display:none;}
    .content .two{display:block;}
    .content .three{display:none;}

}

@media all and (max-width: 479px) {

    .content .one{display:none;}
    .content .two{display:none;}
    .content .three{display:block;}

}
</style>

<div class="content">
    <div class="one">this is the content for desktop</div>
    <div class="two">this is the content for tablet</div>
    <div class="three">this is the content for mobile</div>
</div>

【问题讨论】：

"这段代码应该做我想做的事。"你想让它做什么？它实际上在做什么？您实际上并没有在这里提出问题。您需要提供更多信息。
我只想在移动设备上显示一个在桌面上看不到的特定 div，反之亦然。我似乎无法使用 weebly.com @randak 让这段代码工作
您应该记住，您的检测将例如在台式机上的窄浏览器上显示平板电脑或移动设备的文本。如果您确实需要根据您描述的方式显示内容，则屏幕尺寸检查是不够的。你仍然没有提供太多的工作。我不确定weebly与它有什么关系。你可以发JSFiddle 来演示这个问题吗？
我认为通过截图会更有意义。在第一张图片s13.postimg.org/q49xnrinr/desktop.png 中，所有 3 个 div、桌面、移动设备和平板电脑都是可见的。只有桌面 div（第一类）应该是可见的。这第二张图片s13.postimg.org/zas8b1nw7/mobile.png 表明只显示了移动 div 类 3。那很好。所以我需要帮助修复这段代码，以便桌面视图只显示第一类，而不是第一类、第二类和第三类，就像现在一样。 @randak
只需使用 javascript 检查是否使用移动设备并取消隐藏 div。对 div 使用 css（不显示） -- stackoverflow.com/questions/3514784/…

标签： css mobile weebly

【解决方案1】：

您的代码完全没问题。在 JsFiddle 上尝试过同样的方法。It Works

调整窗口大小并测试各种分辨率。

@media all and (max-width: 959px) {

    .content .one{display:block;}
    .content .two{display:none;}
    .content .three{display:none;}

}

@media all and (max-width: 720px) {

    .content .one{display:none;}
    .content .two{display:block;}
    .content .three{display:none;}

}

@media all and (max-width: 479px) {

    .content .one{display:none;}
    .content .two{display:none;}
    .content .three{display:block;}

}

<div class="content">
    <div class="one">this is the content for desktop</div>
    <div class="two">this is the content for tablet</div>
    <div class="three">this is the content for mobile</div>
</div>

【讨论】：