Media Query for Huawei MediaPad T3 8

hi, sorry for my English…

I build my Media Query for Desktop, Tablet and Smartphone, I build the Media Query for each device.
I will build the Media Query for Huawei MediaPad T3 8.
How here to say the resolution is 1920x800,
Huawei%20MediaPad%20T3

and to find the CSS resolution, I do as here to say, I need to divide the pixel screen between 3.
1920/3 = 640px , and to change from px to em, 640/16= 40em
800/3= 266,666px, and to change from px to em, 360/16= 16.666em

Now my Media Query for Huawei MediaPad T3 8

For Landscape;

@media only screen and (device-width: 40em) 
                   and (device-height: 16.666em)
                   and (-webkit-min-device-pixel-ratio: 8.0)
                   and (orientation: landscape) {

For Portrait;

@media only screen and (device-width: 16.666em) 
                   and (device-height: 40em)
                   and (-webkit-min-device-pixel-ratio: 8.0)
                   and (orientation: portrait) {

Now the question for the master…, it is my Media Query for Huawei MediaPad T3 8 corret?

Hello!

Your queries seem to be right, but why are you building media queries for specific device(s)? Does this device, specifically, have problems displaying your page?

Usually, what I do, is test the web on different browsers and different resolutions. You should test your web on Google Chrome, Firefox, Safari (which may be the hardest to test, since the only way to do it is having a mac product) and Internet Explorer/Edge and their mobile versions. By doing so, you should not need to create different queries for different devices, just a couple of breakpoints that will work on most browsers.

To test the different resolutions there are various tools, but the most used is the browser Developer Tools:

  1. Usually pressing the key F12 will open the developer tools. Another option is to press Control + Shift + i and if that doesn’t work, right click on the page and then click on Inspect element.

  2. With the developer tools open, find the Responsive mode design button (and click it :stuck_out_tongue:) which, in Firefox at least, is on the top right corner of the developer tools window. This will allow you to resize the screen, even to wider resolutions that your screen supports.

Take a look (if you haven’t already) at the Responsive Web Design Principles and How to start think responsively.

I hope it helps :slight_smile:,

Regards!

Very Thanks for your answer!

Does this device, specifically , have problems displaying your page?

not…i do it because the :hover from nav is different from every device, here for iPhone 6/7/8

and for iPhone 5

nav2

How you to see, the big from the :hover from nav from every device is very different…

Usually, what I do, is test the web on different browsers and different resolutions. You should test your web on Google Chrome, Firefox

i too…
with safari I don’t it, but i will it… i will install mac on Virtualbox as have with Windows 10 to did…

Oh! I see the problem now :slight_smile:!

There are two ways to display that kind of menu/navigation:

  1. Have a button that’s shown only when you’re using a small screen device (usually 1024px or less, though it may vary depending on how big the menu is). The button replaces the menu and hides the menu content, and when clicked, the menu is shown is vertical order.
  2. You could remove the button and just arrange the menu in vertical order.

Take MDN as an example (though it has an error on firefox, ironically), they just rearrange the menu vertically on smaller screens but leave it horizontally on bigger ones.

Freecodecamp.org, on the other hand, displays the button on smaller screens. My own website does this too, and I’ll leave it as an example because it’s similar to what you have now, not for self promotion :stuck_out_tongue:.

This samples may give you a different point of view/alternative, which is actually better for user interaction (UX).

Regards!

Edit:

Even though I wrote that there are two ways of displaying that kind of menu, you’re free to solve the problem in whatever way you see fit as long as it’s user friendly, otherwise your users/visitors will have trouble navigating your site.

here how to build my Media Query for desktop, tablet and smartphone, for now… because I will add more device…