Problem with iPad 6 resolution on media Query

Sorry for my English…

I build a responsive file for my Media Query.

In my head Tag, the meta Element like this,

<meta name=“viewport” content=“width=device-width, initial-scale=1”/>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”/>
<link rel=“preload” href=“CSS/xxxx.css” as=“style”>
<link rel=“preload” href=“CSS/xxxx” as=“style”>
<link rel=“preload” href=“https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js” as=“script”>

I will have my file for Media Query only for any device. Now to try to build for iPhone 6,

/ iPhone 6/7/8 , in CSS 667 x 375 (41.6875em x 23.4375em) Landscape /

@media only screen and (width: 41.6875em) 
                   and (height: 23.4375em) 
                   and (orientation: landscape) 
                   and (-webkit-min-device-pixel-ratio: 2) {

/ iPhone 6/7/8 , in CSS 375 x 667 (23.4375em x 41.6875em ) Portrait /

@media only screen and (width: 23.4375em) 
                   and (height: 41.6875em) 
                   and (orientation: portrait ) 
                   and (-webkit-min-device-pixel-ratio: 2) {

when test my Website with Chrome to come this,
enter image description here
all to see wonderful…, but search.google to show this, it to say Text to ready too small and Clickable elements are too close together.

enter image description here

I think my problem is because width: 23.4375em and height: 41.6875em are not the resolution for iPhone 6, they working only with max and min.
I to search on the internet and only found with min-device-width and
max-device-widt,

My question, how can have Media Query for iPhone 6, without max and min, only with width and height.

Can please help me, anyone, with this problem, Thanks!

ems are relative units; they’re definitely the correct unit to use in media queries, but you’re trying to target an exact screen size with inexact units. Even if you switched to pixels for the media query, use min-width just below the target and max-width just above the target. However

There is no reason why you can’t just use width and height, the reason you can’t find examples is that no-one does it, it’s a not a useful thing. Literally the only usecase I can see is what you seem to be trying to do, which is to attempt to sniff the actual physical device type via CSS. This is not what media queries are designed for and anything you come up with is going to be incredibly error-prone.

Why are you trying to do this? I get you may have good reasons for it, but there may be better ways to get what you actually want

1 Like

Very Thanks for your answer!

I will have my file for Media Query only for any device. I think when write a Media Query with min and max it can overwriting the media Query from another device…

I have a File for Media Query for Desktop, Tablet and Smartphone,

An example of how I have my Media Query…

@media (min-width: 80.0625em) { }
   @media (min-width:   64.0625em) and (max-width: 80em) { }
   @media (min-width: 48em) and (max-width: 64em) { }
   @media only screen and (min-width:  48em)  and (max-width: 64em) and (orientation: landscape) { }
    @media only screen and (min-width: 48em) 
                   and (max-width: 64em) 
                   and (orientation: portrait) {}

/* iPhone 6/7/8 , in CSS 667 x 375 (41.6875em x 23.4375em) Landscape */

  @media only screen and (width: 41.6875em) 
                   and (height: 23.4375em) 
                   and (orientation: landscape) 
                   and (-webkit-min-device-pixel-ratio: 2){ }

Now come next Media Query…

 @media only screen and (device-width: 40em) 
                   and (device-height: 24em) 
                   and (orientation: landscape) { }

My question… , can do the Media Query from iPad 6 overwrite the last Media Query ?

I to do as you to say,

/* iPhone 6/7/8 , in CSS 667 x 375 (41.6875em x 23.4375em) Landscape */

@media only screen and (min-device-width: 23.4375em) 
                   and (max-device-width: 41.6875em) 
                   and (orientation: landscape) 
                   and (-webkit-min-device-pixel-ratio: 2)

/* iPhone 6/7/8 , in CSS 375 x 667 (23.4375em x 41.6875em ) Portrait */

@media only screen and (min-device-width: 23.4375em) 
                   and (max-device-width: 41.6875em) 
                   and (orientation: portrait ) 
                   and (-webkit-min-device-pixel-ratio: 2){

How to show with the text from google.search

I will this configuration to contain, as you to say to me…

I am agnostic, but I wish your nice Week and a happy new year!

1 Like

Em is a relative unit, namely the width of a letter “m” in the current font.

This is one em:

m

This is also one em:

image

Technically you can use cm and even inches for size units in CSS, but it’s always hardwired at 96 pixels per inch anyway. Just use pixels for media queries and rems (that’s rems for “root ems”, the size of the base font) for everything else.

Thanks for your recommendations! , but I not Understand

(that’s rems for “root ems”, the size of the base font) for everything else

I to learn my Website to build in Germany, and people trouble with me when every time write on pixels for media query…

Ems are recommended for media queries because they’re relative to the text size. Pixels are fine as well but note that you need to take into account density (for example, my phone is about 5.7" wide, but that’s at 444px/inch, so that’s 2500 pixels). The main thing I was getting at was that you were trying to specify an exact size to target an exact model of device. That’s not what media queries are for, they’re generally there to allow you to apply conditional changes based in broader criteria than what you were trying to do.

1 Like

Thanks for your explanation,

so, you recommend me instead used em for my Media Query, used px?

It’s context sensitive. If you want to not care about the actual pixel dimensions then use relative units, if you do, use pixels. eg if I want it to work on a screen size regardless of pixel density then I’d probably use relative units (like an old iPhone might be a few hundred pixels wide and a newer on a few thousand, but physically they’re much the same size). Use what is suitable for the situation

It’s my understanding that all browsers pretty much hardwire the understanding that 1 inch = 96 pixels and scale things accordingly by default (plus lots more viewport fudging depending on the device). So basically, pixel::web : point::typography.

I wasn’t aware of ems being used as a base unit for media queries. I’m intrigued by it now, so I’ll have some homework to do. :nerd_face:

/me googles “css media queries ems pixels”, cmd-clicks a dozen links, closes laptop lid. :sleeping:

Yeah that seems to be the case, not sure what had given me that impression. I just kinda instinctively pick the units, though I normally try to keep stuff in balance with text sizings as much as possible so relative units are better for that. It’s been years since I used media queries for anything except tiny modifications though, so caveat emptor I guess