javascript - 如何轻松隐藏所有内容并在 html 页面上为移动设备显示消息

Question

我有这个非常基本的待办事项列表应用程序。 ( http://www.hackerpup.com/todo/index.html ) 这实际上只是一个练习 jQuery 的入门元素。我对结果很满意，但是它在移动设备上非常丑陋，在我重新配置它以使其在移动设备上看起来不错之前，我希望它在移动设备上不可用。

有没有一种简单的方法可以隐藏我页面上的所有内容，只显示一条简单的消息而不是针对移动设备？即使是简单的文字“抱歉，此页面不适用于移动设备”。

(我很乐意用 css、javascript/jquery 或任何可行的东西来做这件事)。

谢谢

Answer 1

在你的链接中你一直在使用bootstrap，所以你可以通过bootstrap轻松解决你的问题

<div class="hidden-xs">
        <div>My all element </div>
</div>
<div class="visible-xs">
       <p>My Text </p>
</div>