Question

我有这个非常基本的待办事项列表应用程序。（http://www.hackerpup.com/todo/index.html）这实际上只是一个练习jQuery的入门项目。我对结果感到满意，但是在移动设备上非常难看，直到我将其重新配置为在移动设备上看起来没问题，我希望它不能在移动设备上使用。

是否有一种简单的方法可以隐藏我页面上的所有内容，只是为移动设备显示一条简单的消息？即使像文字一样简单＆＃34;对不起，此页面不适用于移动设备＆＃34;。

（我很高兴用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>

Answer 2

由于您正在使用Bootstrap，因此可以使用其responsive utilities：

<div class="hidden-xs">
    <!-- your original HTML that will be hidden when screen width is <768px -->
</div>
<div class="visible-xs-block"> <!-- 'visible-xs' was deprecated as of Bootstrap 3.2.0 and I see that you are using 3.3.5 -->
    Sorry this page is not made for mobile devices
</div>

无论如何，这不是最好的解决方案。您应该继续允许用户使用移动网络浏览器继续使用您的网站甚至; - ）

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

2 个答案: