Search code examples
cssmobileresolution

Media Query Only for Iphone 6

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!

Solution

  • I know because before to come to this problem...

    I trying to target an exact screen size with inexact units. Because I have not found an exact screen size for iPad 6, I will write the Media Query as I to see in Internet...

    /* 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 now on search.google

    enter image description here