Track inner size - Githubissues

forgotPassword commented 8 months ago

Hello,

I think most people emulate a device (in Chrome DevTools) because they want to check how their website will look on that device.

However the raw screen size is misleading, since it differs considerably from innerHeight.

Eg on iPhone 15, Safari, Chrome and PWA.:

i15 In PWA you also need to consider if the device has rounded corners.

amirshnll commented 8 months ago

hey @forgotPassword , Thank you for your feedback. If you are able to assist us in enhancing the device information, please fork the repository and update the information accordingly.

forgotPassword commented 8 months ago

I will leave this here for posterity. Checking with Xcode simulator I got:

# iPhone 13 mini - Inner Height:
Safari: 629
PWA: 762, border-radius: 45px

# iPhone 13 and iPhone 13 Pro - Inner Height:
Safari: 664
PWA: 797, border-radius: 48px

# iPhone 13 Pro Max - Inner Height:
Safari: 746
PWA: 879, border-radius: 54px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
    <link rel="manifest" href="app.webmanifest" />
    <style type="text/css">
        html, body{margin: 0;padding: 0;background: #fdf5bf;width: 100%;height: 100%;overflow: hidden;}

        .summary{border: 1px solid red;}

        .bottom_radius{position: absolute;height: 20%;width: 100%;background: #85cb33;bottom: 0;left: 0;}
        .bottom_radius > div, .bottom_radius > button{float: left;margin-left: 10px;}

    </style>
</head>

<body>
    <div class="summary"></div>

    <div class="bottom_radius">
        <button type="button" class="minus">- radius</button>
        <button type="button" class="plus">+ radius</button>
        <div class="current"></div>
    </div>

    <script type="text/javascript">

        // # summary_render

        var summary_div = document.querySelector('.summary');

        var summary_render = function(){
            var summary_text = [];

            summary_text.push(`window.devicePixelRatio: ${window.devicePixelRatio}`);

            summary_text.push('');

            summary_text.push(`window.screen.height: ${window.screen.height}`);
            summary_text.push(`window.screen.availHeight: ${window.screen.availHeight}`);
            summary_text.push(`window.outerHeight: ${window.outerHeight}`);
            summary_text.push(`window.innerHeight: ${window.innerHeight}`);

            summary_text.push('');

            summary_text.push(`window.screen.width: ${window.screen.width}`);
            summary_text.push(`window.screen.availWidth: ${window.screen.availWidth}`);
            summary_text.push(`window.outerWidth: ${window.outerWidth}`);
            summary_text.push(`window.innerWidth: ${window.innerWidth}`);

            summary_div.innerHTML = summary_text.join('<br />');
        };

        summary_render();

        summary_div.onclick = summary_render;

        // # bottom_radius

        var bottom_radius_div = document.querySelector('.bottom_radius'),
            bottom_radius_current = document.querySelector('.bottom_radius .current'),
            radius_value = 60;

        var update_bottom_radius = function(){
            bottom_radius_div.style = `border-bottom-right-radius: ${radius_value}px;`;
            bottom_radius_current.innerHTML = `${radius_value}px`

        };

        document.querySelector('.bottom_radius .minus').onclick = function(e){
            radius_value--;
            update_bottom_radius();
            e.preventDefault(); // prevent zooming on fast taps
        };

        document.querySelector('.bottom_radius .plus').onclick = function(e){
            radius_value++;
            update_bottom_radius();
            e.preventDefault();
        };

        update_bottom_radius();
    </script>

</body>
</html>

app.webmanifest
{
  "name": "mobile_size",
  "orientation" : "portrait",
  "display": "standalone",
  "id" : "mobile.size.app",
  "theme_color": "#ffffff",
  "background_color":"#ffffff",
  "icons": [
    {
      "src": "512.png",
      "sizes": "512x512",
      "type": "image/png"
    }]
}

You also need any 512px image. It might be worth to host it in github pages, so other users (maybe with real devices) could report their results.

amirshnll / custom-device-emulation-chrome

Track inner size #8