移动/平板电脑设备更改HTML(Change HTML on mobile/tablet devic

我有1键按钮2.我必须表明按钮1，如果我在一个电脑屏幕，而是我必须表明按钮2，如果我在手机/平板电脑设备很。 所以，我想的东西，可以在我的页面改变显示的HTML。 也有一些是像mediaquery为HTML？ 先感谢您！

Answer 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>

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

Answer 2:

你可以简单地改变你的按钮使用CSS媒体查询的知名度。 或使用像一个图书馆head.js确定你是在什么样的浏览器，然后通过JavaScript插入正确的按钮。

文章来源: Change HTML on mobile/tablet device