在移动/平板设备上更改 HTML答案

【问题标题】：Change HTML on mobile/tablet device在移动/平板设备上更改 HTML
【发布时间】：2014-11-03 16:33:50
【问题描述】：

我有按钮 1 和按钮 2。如果我在电脑屏幕上，我必须显示按钮 1，相反，如果我在移动/平板电脑设备中，我必须显示按钮 2。所以，我想要一些可以改变我页面中可见 html 的东西。有类似 html 的 mediaquery 的东西吗？提前谢谢！

【问题讨论】：

标签： html button media-queries

【解决方案1】：

是的，可以使用媒体查询来获得您想要的结果。但是你在你的 CSS 样式表中使用它们。

类似这样的：

@media only screen and (max-width : 480px) {
  .btn-mobile-visible {
      visibility: visible;
  };

  .btn-desktop-visible {
      visibility: hidden;
  };    
}

@media only screen and (min-width : 481px) {
  .btn-mobile-visible {
      visibility: hidden;
  };

  .btn-desktop-visible {
      visibility: visible;
  };   
}

然后在您的 html 中，您只需在按钮上添加 css 类：

<button class="btn-desktop-visible">Visible in desktop</button>
<button class="btn-mobile-visible">Visible in mobile</button>

如果用户更改了他/她的浏览器窗口的大小，可能会产生不想要的副作用 - 这可能会使事情变得有点混乱 :)

【讨论】：

这是一个很好的解决方案，但是否可以选择所有移动/平板设备？我没有定义分辨率大小。
媒体查询使用最大/最小宽度/高度，并为这些宽度/高度应用指定的 css 类。恐怕它看起来不像“设备”。如果你想有一个基于设备的解决方案，你应该查看一些 javascript 库或类似 detectmobilebrowsers.com 的东西，然后使用 jQuery 或其他东西来隐藏/显示按钮或其他元素。不过，该解决方案很快就会变得非常混乱:)
我做了@media screen and (max-device-width: 600px){ } 如果我是纵向的，它可以工作，但是是隐藏的，如果我切换到横向，按钮是隐藏的，但是如果我再次纵向切换，按钮会出现o.o怎么可能？？
您可以尝试添加一个元标记来禁用缩放并设置设备屏幕的比例和视口。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
耶！我很高兴能帮上忙！ :)

【解决方案2】：

您可以使用 CSS 媒体查询简单地更改按钮的可见性。或者使用 head.js 之类的库来确定您使用的是哪种浏览器，然后通过 javascript 插入正确的按钮。

【讨论】：