-2

Basically as the title states. I'm wondering if I can somehow make a page hidden completely from desktop users. Or if they do try access it via desktop, it redirects somewhere else. I just want it to be for tablet/mobile only.

Brandon
  • 374
  • 2
  • 15
  • 2
    You need to flesh out your requirements. For instance, when you say "desktop" are you talking about device detection? Or did you just want to hide the content at certain breakpoints? You can do both, but the approach (and amount of effort) will differ. – delinear Oct 19 '17 at 16:14
  • @delinear yeah device detection. I want the whole thing to be hidden if it sees the users trying to connect to it through a desktop. Tablet and iphone should still accept it. – Brandon Oct 19 '17 at 16:40

1 Answers1

3

Well using media queries, you can hide/show based on the user's screen size. You could hide the content and make a pop-up message appear if their screen is of certain size, for example .content will only show if the screen is 500px wide.

(To see it work, click run then click full page, re-size your browser and it will hide/show) 

@media screen and (min-width: 500px) {
    .content {
        display: none;
   }
}
<div class="content">
<p>This is my website</p>
</div>

Or if you actually want to remove the content, use the mobile checker shown here - Detecting a mobile browser and if it returns false, then do the following:

var content = document.getElementById("content");
content.remove(content);
Jared Bledsoe
  • 559
  • 5
  • 15
  • 2
    All my mobile devices have high resolution displays so they tend to have similar (or larger) desktop sizes than my actual desktop computer. – Álvaro González Oct 19 '17 at 16:22
  • Px are defined as 1/96th of an inch, not actual pixels. So on your phone, the browser will read the width of a standard phone around 300-500px while a monitor will be around 800-1200px. – Jared Bledsoe Oct 19 '17 at 16:27
  • Yeah something like this, but if i resize the browser to a smaller size it'll show. I'd rather just eliminate it completely if it detects the users on a desktop, if that makes sense. – Brandon Oct 19 '17 at 16:40
  • Alright, I added a JS version to actually delete the HTML if it's not on a phone/tablet. – Jared Bledsoe Oct 19 '17 at 16:44
  • 1
    awesome, thank you very much!! – Brandon Oct 19 '17 at 17:00
  • Yep! If it solved your question, please mark it as the accepted answer. – Jared Bledsoe Oct 19 '17 at 17:27