移动/平板电脑设备更改HTML [英] Change HTML on mobile/tablet device

问题描述

我有按钮1和按钮2我必须表明按钮1，如果我在电脑屏幕上，相反，我必须表明按钮2，如果我在手机/平板电脑设备来的。
所以，我想的东西可以在我的网页更改可见HTML。
也有一些是像mediaquery为HTML？
谢谢你在前进！

I have button 1 and button 2. I have to show button 1 if I am in a computer screen, instead, I have to show button 2 if I'm in mobile/tablet devices. So, I want that something that can change the visible html in my page. There is something like mediaquery for html? Thank you in advance!

推荐答案

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

Yes, media-queries could be used to get the result you want. But you use them in your css-style sheets.

事情是这样的：

@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类：

And then in your html you just add the css-classes on you buttons:

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

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

Unwanted side effects could be if the user changes the size of his/hers browser window - that would probably make things a little messy :)

这篇关于移动/平板电脑设备更改HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！