Change HTML on mobile/tablet device

问题

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!

回答1:

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

Something like this:

@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;
  };   
}

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 :)

回答2:

You can simply change the visibility of your buttons with css media queries. Or use a library like head.js to determine what kind of browser you are on and then insert the correct button via javascript.

来源：https://stackoverflow.com/questions/26710345/change-html-on-mobile-tablet-device