0

I am just getting into responsive design, and have a question about displaying content.

Obviously I want to display much more content when the user is using a larger screen, but I also want to display certain text based on the users device.

For example, I want to say "drag and drop files" on desktop, but on phones I want to say "touch to choose files". I realize I can do this using @media queries and hiding the text that doesn't apply, but I was wondering if there is a better way to do this (so the user doesn't have to load both sets of text each time).

4

1 に答える 1

0

this snippet is part of bootstrap css framework which you can show/hide any part of DOM based on user device,for more information and how to use get to here:

.hidden {
  display: none;
  visibility: hidden;
}
.visible-phone {
  display: none !important;
}
.visible-tablet {
  display: none !important;
}
.hidden-desktop {
  display: none !important;
}
.visible-desktop {
  display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

Or you can use jquery plugins(e.g responsejs , ....),BUT i suggest to you use from CSS @media queries(bootstrap is the best for your intent).

于 2012-11-03T07:12:26.267 に答える