Question

如果用户在台式机/笔记本电脑上显示不同的数据，我想显示一些HTML代码。这是我的代码

    <script type="text/javascript">
     if (screen.width <= 800) {
     <html>
     <p>You are on desktop , or a really big screen!</p>
     </html>
     } 
     </script>

Answer 1

使用媒体查询后，您可以达到效果这是一个有用的演示 - http://jsfiddle.net/se0fpegj/

移动＆＃34;结果＆＃34;要显示<p>You are on desktop , or a really big screen!</p>元素的面板。

说明：

将属性 - class="see-me"应用于您要应用媒体查询的HTML元素，即

<p class="see-me">You are on desktop , or a really big screen!</p>

这里的CSS块

@media screen and (max-width: 800px) {
    .see-me {
        display: none;
    }
}

是说这个CSS＆＃34;规则集＆＃34;最多只能应用800px的屏幕宽度然后，＆＃34;规则集＆＃34;是的，任何具有see-me类的元素都应该具有display: none;属性（正如术语所暗示的那样 - 不显示元素）

<强>更新使用表（没有类）的工作演示 - http://jsfiddle.net/738jqben/

Answer 2

您可以使用bootstrap来实现此目的，bootstrap具有用于此目的的css类，例如仅显示桌面区域的visible-md。

如何使用javascript添加或从移动/桌面获取内容

2 个答案: