Media queries mobile menu and normal menu

My website has 4 media queries, one for mobile (fluid), one for tablet (720px), small screens (940px) and big screens (1140px). Mobile and tablet will show a mobile menu, small and big screen will have a normal menu which will show the sub-menu on hover.

The Queries:

< 768px // Mobile 
> 768px and < 1024px // Tablet
> 1024px and < 1200px // Small screens
> 1200px // Big screens  

The Viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

The problem

iPad will show Small screens (hover menu) because the width is 1024px. Tablet and mobiles (or touch devices) should only show the mobile menu regardless of there width, because touch devices can not handle :hover.

Solutions:

Neither one of the underlying solutions are the way I want it. I am looking for a pure CSS version to detect either a mobile devices or a touch device. Off course one of these solutions will be applied if there is no CSS option.

Modernizr - It can detected if a device is mobile or tablet and it can detect if it is a touch device. Downside is that you have to add a package which will result in an extra http request and it will make the website 'slower'. An other downside is that it will not work when Javascript is disabled.

Javascript - Use Javascript to detect all userAgent for mobile and tablets. Downside is that it will not work if Javascript is disabled and you have to keep an eye out for new devices / userAgent

CSS (device-max-width) - Well this seems to be the solution, but I am afraid of conflicts when I have a (device-max-width: 768px), (device-min-width: 768px) together with my normal desktop queries (min-width:1024px) and (max-width: 1200px) and (min-width: 1200px)

Answers


The proper solution for your problem exists in the CSS specifications, but has not been implemented yet: https://drafts.csswg.org/mediaqueries/#hover

@media (hover) {
  /*styles for devices where the user can hover*/
}
@media not (hover) {
  /*styles for devices where the user cannot hover, such as mobiles and tablets*/
}

Until browsers get around implementing it, you're stuck with nasty workarounds such as browser sniffing.


Need Your Help

MVC building email body

c# asp.net-mvc

I'm coming from web forms and still very new to MVC. I want to create a contact form that simply emails me the contact information,

How to get row count in groovy sql

groovy

Am new to groovy. Want to know how to get the number of rows from a given sql result returned form an sql query below. I have googled lot but didn't find the proper solution.