您如何使 html 代码片段仅显示在桌面搜索中？答案

【问题标题】：How do you make an html code snippet only show up for desktop searches?您如何使 html 代码片段仅显示在桌面搜索中？
【发布时间】：2015-06-30 18:50:21
【问题描述】：

我在我的工作网站上使用小的 HTML 框。

问题是，我们需要将 HTML 显示给计算机浏览器，但我们不希望它显示在移动设备上，因为当移动设备获取 HTML sn-ps 时，它们会出现故障。

有人有什么想法吗？

【问题讨论】：

这是一个代码 sn-p，因此据我所知我不能使用 CSS。它有点像 wordpress 或构建器站点，您可以在其中将代码放入指定的 HTML 框中。目标是阻止移动设备看到某些内容。
使用媒体查询？在一定宽度下，您可以在那些 HTML 块上“显示：无”？
使用 PHP 查询设备尺寸，然后相应地回显 HTML，或者使用 CSS 媒体查询来重新设置现有 HTML 的样式
@SOofWXLS 如何使用 PHP 查询设备大小？它运行在服务器上，而不是客户端。需要在客户端JS查询设备大小，发送给PHP。
@Barmar 抱歉，开始写一条评论并合并到另一条评论中...我使用 PHP 查询 $_SERVER['HTTP_USER_AGENT'] 并尝试判断它是否是 iPhone 等，然后相应地回显所需的 HTML 部分，与 CSS 媒体查询相比非常草率，但如果 CSS 不可用，则作为 OP 建议的开始。

标签： javascript php html css

【解决方案1】：

您需要使用 CSS 中的媒体查询来将 display: none 添加到特定屏幕尺寸的元素中

例子：

@media only screen AND (max-width: 736px) { // 736px is the iPhone 6+ max 
  .mobileHidden { // rename to whatever
    display: none; // doesn't display in the browser.
  }
}

您可以将最大宽度更改为您喜欢的任何值，并将类名更改为任何值。然后你只需将类添加到要隐藏的元素中，然后就完成了。

CSS Media Query Standard Sizes

【讨论】：

任何和所有 CSS 都显示为文本。为我们编写网站的程序无法识别 css，据我所知，无法附加单独的样式表。
如果设备不支持 css，那么您必须进行服务器端检测并调整您提供的任何内容。例如if ($device == 'mobile') { send mobile version } else { send desktop version }

【解决方案2】：

因为似乎任何 PHP 或 JavaScript 都被剥离了，所以我接下来要看看您是否可以利用网站上的任何现有样式 - 特别是如果该网站已经响应式。缩小浏览器窗口时是否存在隐藏或更改的元素？

使用您的浏览器开发工具检查 CSS（IE 中的 F12 和 FF（Chrome 中的 ctrl + shift + i？））并查看 CSS 中是否已经存在任何媒体查询。这是一个很长的机会，但可能已经有像斯图尔特赛德所建议的那样。如果是这样，您可以将该查询中的目标类之一添加到 HTML 框中的内容包装器 div。为了清楚起见，再次使用 Stewartside 示例中的类：

<div class="mobileHidden">Do what you want here</div>

否则您可能需要与管理 CMS 的人员取得联系，说明您的要求并询问他们是否可以向 CSS 添加一些样式。

【讨论】：

我可以试试，明天上班的时候再试试。我知道模板thingy使用div类的事实，所以我认为这会起作用。
我认为这些盒子是一种具有源视图的所见即所得？我很可能不需要告诉您，但以防万一：确保您在尝试此操作时使用编辑器的“源代码”或“html”视图（与此处的其他建议一样），否则您将得到一切作为文本输入，不被视为标记或代码。
我的代码到这里
这件事不起作用。
尝试突破所用系统的限制总是一个有趣的挑战。我真希望我能看到你在处理什么。我的最后一个建议是弄清楚为什么排序会发生变化并修复它——这只是一个样式问题，但如果你不确定要查找什么/如何查找，则相对复杂。但是，听起来您只能添加文本并且没有源视图选项，在这种情况下您将被卡住，除非您可以访问嵌入的 CSS 文件
我同意，我现在好像被卡住了。谢谢大家的帮助。这不是我必须做的事情。只是为了更有效地做到这一点。仅供参考，网站名为dealer.com

【解决方案3】：

查看 CSS 中的媒体查询。例如，有了它，您可以在小型设备上隐藏 HTML 元素。

编辑：您可以直接在 HTML 元素上添加样式。但那是肮脏的 html...

【讨论】：

我正在使用的 html 框似乎无法识别 CSS。它确实可以识别 php。
@LeonardTreman PHP 在服务器上运行，客户端框无关紧要。
使用 php 您无法从客户端访问太多信息。 JavaScript 将是这里的方法。使用 php 的唯一方法是检查浏览器类型，但这对于代码 sn-p 来说意义重大。
非常酷，所以如果我输入 PHP 应该可以工作吗？ XD 对不起，我有写作学位，我可以做一些 netbeans 小程序，但目前 PHP 仍然有点超出我的掌握。我从来没有成功运行过 get 或 getpost 命令。
PHP 将被保存到数据库中，如果不删除，则可能会在提供页面时运行。可能的答案在这里？ stackoverflow.com/questions/13023157/…