0

Summary: I am attempting to design a restaurant menu. When viewing the site on a desktop the user should see the entire menu i.e a category ('Appetizers') and all of the food entries in said category('Fried Calamari', 'Mozzarella Sticks', etc). However, when viewed on a mobile device I would like the entries to be hidden and the food categories to be buttons. When the 'Appetizer' button is clicked, the user should then see 'Fried Calamari', 'Mozzarella Sticks', etc. I feel like I am going about implementing this in a convoluted way. My code:

index.html:

<div class="food-section-heading" id="appetizers">Appetizers</div>
<div class="menu-item">
   Fried Calamari
</div>
<div class="menu-item">
   Mozzarella Sticks
</div>

using javascript to hide what's normally there and present the button:

/* Function definitions */
function hideElements(className){
  elements = document.getElementsByClassName(className);
  for(i = 0; i < elements.length; i++){
    elements[i].style.display = 'none';
  }}

function showElements(className, displayType){
  elements = document.getElementsByClassName(className);
  for(i = 0; i < elements.length; i++){
    elements[i].style.display = displayType;
  }}

/* Main Program */

//if iPhone X or smaller hide '.menu-item' elements
if(window.screen.availWidth <= 375){
   hideElements('food-section-heading')
   hideElements('menu-item');
}
/* Code to create button and show elements upon click event not included. I stopped writing it and came here because I feel I can't be doing this right*/

Is there any easier way to go about this? (A good example of what I am talking about is grubhub.com on mobile vs what grubhub.com presents on Desktop.)

Justin
  • 1,029
  • 2
  • 10
  • 17

2 Answers2

1

There are many ways to go about displaying the same document differently on different devices.

When targeting desktop / laptop / tablet / mobile a usual starting point would be to choose whether you want to detect:

  • the browser viewport size / viewport orientation / device screen size; or
  • browser make and version; or
  • data related to the browser's touch capability

Then, you can use:

  • CSS @media queries (commonly used in Responsive Design)
  • Client side browser sniffing (via javascript)
  • Server-side browser sniffing (used in RESS / Responsive with Server Side)
  • Touch detection (again, via javascript)

and more.

Targeting via CSS @media queries for screen size

One of the more easily-implemented approaches is to deploy one or several CSS @media queries.

Here is a simple @media query targeting screen sizes which are 800px wide or narrower:

@media only screen and (max-width: 800px) {

  .menu-item {
    display: none;
  }
}

Adding in @media query hover: hover | none

If you want more sophisticated targeting (e.g. in a situation where you don't want to target narrow browser windows on a desktop / laptop) you can target the screen size (as above) in combination with checking if the screen supports a hovering action (on the basis that if it doesn't it's very likely a touchscreen):

@media only screen and (max-width: 800px) and (hover: none) {

  .menu-item {
    display: none;
  }
}

Older approach using device-size @media queries (not recommended)

Before the @media query hover: hover | none arrived, if you wanted more sophisticated targeting, you could target actual device sizes with a @media query:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px), 
       only screen and (min-device-width: 320px) and (max-device-width: 568px), 
       only screen and (min-device-width: 360px) and (max-device-width: 598px) {

         .menu-item {
           display: none;
         }
}

But in practice this tends to be less useful and harder to maintain.

Community
  • 1
  • 1
Rounin
  • 21,349
  • 4
  • 53
  • 69
  • 1
    Upvoted, but I would avoid and _recommend avoiding_ browser sniffing, whether server or client side. User Agent strings can be and are spoofed, so you can't trust them, and in particular Firefox's anti-fingerprinting setting can throw off such detections. Using `@media` queries is the "proper" way to go, maybe along with touch detection (but there are full-size touch monitors too). After the original print v. screen, this is the kind of thing media queries were developed for. – Stephen P Nov 06 '19 at 21:40
  • Agreed - User Agent strings are a world of pain. – Rounin Nov 07 '19 at 08:56
0

I think you might find some useful information in this thread.

Writing for mobile is very different from writing for desktop. It would likely be best if you used a router to direct users to one page if they are on mobile, and the one you've already created if they are on desktop.

NegativeFriction
  • 346
  • 1
  • 11