How to handle difference between device screen resolution vs device browser screen resolution in CSS

Question

I have an exhaustive list of screen resolution for most of the devices

Screen Resolutions
width   height
##################################################################################
5120    2880 Mon H

@media screen and (max-width: 5120px)
{
    // Horizontal Monitor Display
    @media screen and (max-width: 5120px),and (max-height: 2880px){}    
}

##################################################################################
##################################################################################
4096    2304 Mon H
4096    2160 Mon H

@media screen and (max-width: 4096px)
{
    // Horizontal Monitor Display
    @media screen and (max-height: 2304px){}
    // Horizontal Monitor Display
    @media screen and (max-height: 2160px){}
    
}
##################################################################################
##################################################################################
3840    2160 Mon H

// Horizontal Monitor Display
@media screen and (max-width: 3840px),and (max-height: 2160px){}
##################################################################################
##################################################################################
3200    1440 Smartpho H
3088    1440 Smartpho H

@media screen and (max-width: 3200px)
{
    // Horizontal Smartphone Display
    @media screen and (max-width: 3200px),and (max-height: 1440px){}
    // Horizontal Smartphone Display
    @media screen and (max-width: 3088px),and (max-height: 1440px){}    
}
##################################################################################
##################################################################################
3000    2000 Mon H
2960    1440 Smartpho H
2880    5120 Mon V
2880    1800 Mon H

@media screen and (max-width: 3000px)
{
    // Horizontal Monitor Display   
    @media screen and (max-width: 3000px),and (max-height: 2000px){}
    // Horizontal Smartphone Display
    @media screen and (max-width: 2960px),and (max-height: 1440px){}

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

        // Vertical Monitor Display
        @media screen and (max-height: 5120px){}
        // Horizontal Monitor Display
        @media screen and (max-height: 1800px){}
    }   
}
##################################################################################
##################################################################################
2778    1284 Smartpho H
2736    1824 Tab H
2732    2048 Tab H
2688    1242 Smartpho H

@media screen and (max-width: 2778px)
{
    // Horizontal Smartphone Display
    @media screen and (max-width: 2778px),and (max-height: 1284px){}
    // Horizontal Tablet Display
    @media screen and (max-width: 2736px),and (max-height: 1824px){}    
    // Horizontal Tablet Display
    @media screen and (max-width: 2732px),and (max-height: 2048px){}
    // Horizontal Smartphone Display
    @media screen and (max-width: 2688px),and (max-height: 1242px){}    
}
##################################################################################
##################################################################################
2560    1700 Mon H
2560    1600 Mon H
2560    1440 Smartpho H
2532    1170 Smartpho H

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

        // Horizontal Monitor Display
        @media screen and (max-height: 1700px){}
        // Horizontal Monitor Display
        @media screen and (max-height: 1600px){}    
        // Horizontal Smartphone Display
        @media screen and (max-height: 1440px){}    
    }

    // Horizontal Smartphone Display
    @media screen and (max-width: 2532px),and (max-height: 1170px){}    
}
##################################################################################
##################################################################################
2436    1125 Smartpho H
2400    1080 Smartpho H

@media screen and (max-width: 2436px)
{
    // Horizontal Smartphone Display
    @media screen and (max-width: 2436px),and (max-height: 1125px){}
    // Horizontal Smartphone Display
    @media screen and (max-width: 2400px),and (max-height: 1080px){}    
    
}
##################################################################################
##################################################################################
2388    1668 Tab H
2360    1640 Tab H
2340    1080 Smartpho H
2310    1080 Smartpho H
2304    4096 Mon V
2304    1440 Mon H

@media screen and (max-width: 2388px)
{
    // Horizontal Tablet Display
    @media screen and (max-width: 2388px),and (max-height: 1668px){}
    // Horizontal Tablet Display
    @media screen and (max-width: 2360px),and (max-height: 1640px){}    
    // Horizontal Smartphone Display
    @media screen and (max-width: 2340px),and (max-height: 1080px){}
    // Horizontal Smartphone Display
    @media screen and (max-width: 2310px),and (max-height: 1080px){}    

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

        // Vertical Monitor Display
        @media screen and (max-height: 4096px){}
        // Horizontal Monitor Display
        @media screen and (max-height: 1440px){}    

    }
}
##################################################################################
##################################################################################
2280    1080 Smartpho H
2224    1668 Tab H
2160    4096 Mon V
2160    3840 Mon V
2160    1620 Tab H
2160    1440 Tab H

@media screen and (max-width: 2280px)
{
    // Horizontal Smartphone Display
    @media screen and (max-width: 2280px),and (max-height: 1080px){}
    // Horizontal Tablet Display
    @media screen and (max-width: 2224px),and (max-height: 1668px){}

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

        // Vertical Monitor Display
        @media screen and (max-height: 4096px){}
        // Vertical Monitor Display
        @media screen and (max-height: 3840px){}    
        // Horizontal Tablet Display
        @media screen and (max-height: 1620px){}
        // Horizontal Tablet Display
        @media screen and (max-height: 1440px){}    
    }   
}
##################################################################################
##################################################################################
2048    2732 Tab V
2048    1536 Tab H
2000    3000 Mon V

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

        // Vertical Tablet Display
        @media screen and (max-height: 2732px){}    
        // Horizontal Tablet Display
        @media screen and (max-height: 1536px){}
    }
    // Vertical Monitor Display
    @media screen and (max-width: 2000px),and (max-height: 3000px){}    
}
##################################################################################
##################################################################################
1921    1080 Mon H
1920    1200 Mon H
1920    1080 Mon H

@media screen and (max-width: 1921px)
{
    // Horizontal Monitor Display
    @media screen and (max-width: 1921px),and (max-height: 1080px){}    
    
    @media screen and (max-width: 1920px){

        // Horizontal Monitor Display
        @media screen and (max-height: 1200px){}
        // Horizontal Monitor Display
        @media screen and (max-height: 1080px){}    
    }
}
##################################################################################
##################################################################################
1824    2736 Tab V
1800    2880 Mon V

@media screen and (max-width: 1824px)
{
    // Vertical Tablet Display  
    @media screen and (max-width: 1824px),and (max-height: 2736px){}
    // Vertical Monitor Display
    @media screen and (max-width: 1800px),and (max-height: 2880px){}
}
##################################################################################
##################################################################################
1792    828 Smartpho H

@media screen and (max-width: 1792px)
{
    // Horizontal Smartphone Display
    @media screen and (max-width: 1792px),and (max-height: 828px){} 
}
##################################################################################
##################################################################################
1700    2560 Mon V
1680    1050 Mon H
1668    2388 Tab V
1668    2224 Tab V
1640    2360 Tab V
1620    2160 Tab V
1600    2560 Mon V
1600    1200 Tab H
1600    900 Mon H


@media screen and (max-width: 1700px)
{   
    // Vertical Monitor Display
    @media screen and (max-width: 1700px),and (max-height: 2560px){}
    // Horizontal Monitor Display
    @media screen and (max-width: 1680px),and (max-height: 1050px){}
    
    @media screen and (max-width: 1668px){

        // Vertical Tablet Display
        @media screen and (max-height: 2388px){}
        // Vertical Tablet Display  
        @media screen and (max-height: 2224px){}
    }
    // Vertical Tablet Display
    @media screen and (max-width: 1640px),and (max-height: 2360px){}
    // Vertical Tablet Display
    @media screen and (max-width: 1620px),and (max-height: 2160px){}
    
    @media screen and (max-width: 1600px){

        // Vertical Monitor Display
        @media screen and (max-height: 2560px){}
        // Horizontal Tablet Display
        @media screen and (max-height: 1200px){}
        // Horizontal Monitor Display
        @media screen and (max-height: 900px){}
    }
}
##################################################################################
##################################################################################
1536    2048 Tab V

@media screen and (max-width: 1536px)
{
    // Vertical Tablet Display
    @media screen and (max-width: 1536px),and (max-height: 2048px){}    
}
##################################################################################
##################################################################################
1440    3200 Smartpho V
1440    3088 Smartpho V
1440    2960 Smartpho V
1440    2560 Smartpho V
1440    2304 Mon V
1440    2160 Tab V
1440    1440 Smartpho H
1440    900 Mon H

@media screen and (max-width: 1440px)
{   
    // Vertical Smartphone Display
    @media screen and (max-height: 3200px){}
    // Vertical Smartphone Display
    @media screen and (max-height: 3088px){}
    // Vertical Smartphone Display
    @media screen and (max-height: 2960px){}
    // Vertical Smartphone Display  
    @media screen and (max-height: 2560px){}
    // Vertical Monitor Display
    @media screen and (max-height: 2304px){}
    // Vertical Tablet Display
    @media screen and (max-height: 2160px){}
    // Horizontal Smartphone Display
    @media screen and (max-height: 1440px){}
    // Horizontal Monitor Display
    @media screen and (max-height: 900px){}
}

##################################################################################
##################################################################################
1366    768 Mon H
1334    750 Smartpho H

@media screen and (max-width: 1366px)
{
    // Horizontal Monitor Display
    @media screen and (max-width: 1366px),and (max-height: 768px){}
    // Horizontal Smartphone Display
    @media screen and (max-width: 1334px),and (max-height: 750px){} 
}
##################################################################################
##################################################################################
1284    2778 Smartpho V
1280    800 Mon H
1280    768 Mon H
1280    720 Tab H
1242    2688 Smartpho V

@media screen and (max-width: 1284px)
{
    // Vertical Smartphone Display
    @media screen and (max-width: 1284px),and (max-height: 2778px){}
    
    @media screen and (max-width: 1280px){

        // Horizontal Monitor Display
        @media screen and (max-height: 800px){}
        // Horizontal Monitor Display
        @media screen and (max-height: 768px){} 
        // Horizontal Tablet Display
        @media screen and (max-height: 720px){}
    }
    // Vertical Smartphone Display
    @media screen and (max-width: 1242px),and (max-height: 2688px){}    
}
##################################################################################
##################################################################################
1200    2000 Tab V
1200    1920 Mon V
1200    1600 Tab V

@media screen and (max-width: 1200px)
{
    // Vertical Monitor Display
    @media screen and (max-height: 2000px){}
    // Vertical Monitor Display
    @media screen and (max-height: 1920px){}
    // Vertical Tablet Display
    @media screen and (max-height: 1600px){}    
}
##################################################################################
##################################################################################
1170    2532 Smartpho V
1136    640 Smartpho H
1125    2436 Smartpho V

@media screen and (max-width: 1170px)
{
    // Vertical Smartphone Display
    @media screen and (max-width: 1170px),and (max-height: 2532px){}
    // Horizontal Smartphone Display
    @media screen and (max-width: 1136px),and (max-height: 640px){}
    // Vertical Smartphone Display
    @media screen and (max-width: 1125px),and (max-height: 2436px){}    
}
##################################################################################
##################################################################################
1080    2400 Smartpho V
1080    2340 Smartpho V
1080    2310 Smartpho V
1080    2280 Smartpho V
1080    1921 Mon V
1080    1920 Mon V
1050    1680 Mon V

@media screen and (max-width: 1080px)
{
    // Vertical Smartphone Display
    @media screen and (max-height: 2400px){}
    // Vertical Smartphone Display
    @media screen and (max-height: 2340px){}
    // Vertical Smartphone Display
    @media screen and (max-height: 2310px){}
    // Vertical Smartphone Display
    @media screen and (max-height: 2280px){}
    // Vertical Monitor Display
    @media screen and (max-height: 1921px){}
    // Vertical Monitor Display
    @media screen and (max-height: 1920px){}
    // Vertical Monitor Display
    @media screen and (max-width: 1050px),and (max-height: 1680px){}    
}
##################################################################################
##################################################################################
1024    768 Tab H
1024    600 Tab H

@media screen and (max-width: 1024px)
{
    // Horizontal Tablet Display
    @media screen and (max-height: 768px){}
    // Horizontal Tablet Display
    @media screen and (max-height: 600px){} 
}
##################################################################################
##################################################################################
960     640 Smartpho H
960     540 Smartpho H

@media screen and (max-width: 960px)
{
    // Horizontal Smartphone Display
    @media screen and (max-height: 640px){}
    // Horizontal Smartphone Display
    @media screen and (max-height: 540px){} 
}
##################################################################################
##################################################################################
900     1600 Mon V
900     1440 Mon V

@media screen and (max-width: 900px)
{
    // Vertical Monitor Display
    @media screen and (max-height: 1600px){}
    // Vertical Monitor Display
    @media screen and (max-height: 1440px){}    
}
##################################################################################
##################################################################################
854     480 Smartpho H
828     1792 Smartpho V
800     1280 Mon V
800     600 Tab H
800     480 Smartpho H

@media screen and (max-width: 854px)
{
    // Horizontal Smartphone Display
    @media screen and (max-width: 854px),and (max-height: 480px){}
    // Vertical Smartphone Display
    @media screen and (max-width: 828px),and (max-height: 1792px){}
    @media screen and (max-width: 800px){

        // Vertical Monitor Display
        @media screen and (max-height: 1280px){}
        // Horizontal Tablet Display
        @media screen and (max-height: 600px){} 
        // Horizontal Smartphone Display
        @media screen and (max-height: 480px){}
    }
}
##################################################################################
##################################################################################
768     1366 Mon V
768     1280 Mon V
768     1024 Tab V
750     1334 Smartpho V

@media screen and (max-width: 768px)
{
    // Vertical Monitor Display
    @media screen and (max-height: 1366px){}
    // Vertical Monitor Display
    @media screen and (max-height: 1280px){}
    // Vertical Tablet Display
    @media screen and (max-height: 1024px){}
    // Vertical Smartphone Display
    @media screen and (max-width: 750px),and (max-height: 1334px){} 
}
##################################################################################
##################################################################################
720     1280 Tab V

@media screen and (max-width: 720px)
{
    // Vertical Tablet Display
    @media screen and (max-height: 1280px){}    
}
##################################################################################
##################################################################################
640     1136 Smartpho V
640     960 Smartpho V

@media screen and (max-width: 640px)
{
    // Vertical Smartphone Display
    @media screen and (max-height: 1136px){}
    // Vertical Smartphone Display
    @media screen and (max-height: 960px){} 
}
##################################################################################
##################################################################################
600     1024 Tab V
600     800 Tab V

@media screen and (max-width: 600px){
    
    // Vertical Tablet Display
    @media screen and (max-height: 1024px){}
    // Vertical Tablet Display
    @media screen and (max-height: 800px){}
}
##################################################################################
##################################################################################
540     960 Smartpho V
@media screen and (max-width: 540px)
{
    // Vertical Smartphone Display
    @media screen and (max-height: 960px){} 
}
##################################################################################
##################################################################################
480     854 Smartpho V
480     800 Smartpho V
480     360 Smartpho H
480     320 Smartpho H

@media screen and (max-width: 480px)
{
    // Vertical Smartphone Display
    @media screen and (max-height: 854px){}
    // Vertical Smartphone Display
    @media screen and (max-height: 800px){}
    // Horizontal Smartphone Display
    @media screen and (max-height: 360px){}
    // Horizontal Smartphone Display
    @media screen and (max-height: 320px){} 
}
##################################################################################
##################################################################################
360     480 Smartpho V
320     480 Smartpho V

@media screen and (max-width: 360px)
{   
    // Vertical Smartphone Display
    @media screen and (max-height: 480px){}
    // Vertical Smartphone Display
    @media screen and (max-width: 320px),and (max-height: 480px){}  
}
##################################################################################

I have created a web page to respond to these resolutions.

I am taking example to two devices that I currently have, through which i check the layout of the web page.

Sony Xperia XZ Premium (1080 x 1920 pixels)
Samsung Galaxy Tab A 10.1 (1200 x 1920 pixels)

Portrait and Landscape view of the web page layout are different as follows

Sony Xperia XZ Premium
Portrait view NOT DESIRED LAYOUT
Landscape view DESIRED LAYOUT

Samsung Galaxy Tab A 10.1
Portrait view NOT DESIRED LAYOUT
Landscape view NOT DESIRED LAYOUT

According to WHAT IS MY SCREEN RESOLUTION

Screen resolution(browser resolution) of

Sony Xperia XZ Premium is 360x640
Samsung Galaxy Tab A 10.1 800x1280

How do I correct the scale down of the web page on browser? I suppose I will have same issue in most of the mobile devices

Actual layout issue that can be seen in portrait mode: Expectation with Sony Xperia XZ Premium with 1080x1920 Browser resolution of Sony Xperia XZ Premium according to WHAT IS MY SCREEN RESOLUTION Actual web page layout with Sony Xperia XZ Premium with 360x640

You can see the media section overflowing out of the screen along with contact detail section.

Can anyone help on how to correct this?

Using Gatsby

Even copied the /cache/default-html.js to /src/html.js

Changed /src/html.js file

<head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
      </head>

to

<head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />
        {props.headComponents}
      </head>

Even after changing the viewport meta data inside the html.js issue is not getting solved

Sounds like you should first of all go read up on the difference between “device pixels” and “CSS pixels”. https://juiceboxinteractive.com/blog/a-pixel-is-not-a-pixel-designing-for-a-new-generation-of-mobile-devices/ — CBroe, Mar 26 '21 at 13:28
Possible answer here: https://stackoverflow.com/a/8785677/5641669 — Johannes, Mar 26 '21 at 13:28
The browser size (viewport) is `window.innerHeight` and `window.innerWidth`. But the screen size (resolution) is `screen.width` and `screen.height`. In CSS, the media queries reference the viewport not the screen resolution. Browser components like the bookmark toolbar and url bar decrease the browser viewport height. — TerminalVelocity, Mar 26 '21 at 13:30
IMHO you doign something seriosly wrong if you need media queries for eevry possible screen resolution and format (landscape vs portraite). The trick about responsive webdesign is not to use more then 3-5 different media queries in the first place. — tacoshy, Mar 26 '21 at 14:22
@tacoshy `@media only screen and (orientation: landscape)` and with breakpoints, will use it next time. Already this web page `online` getting issue only in `Portrait` mode — Santhosh Dhaipule Chandrakanth, Mar 27 '21 at 08:43

How to handle difference between device screen resolution vs device browser screen resolution in CSS

0 Answers0