Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Track inner size #8

Open
forgotPassword opened this issue Jan 22, 2024 · 2 comments
Open

Track inner size #8

forgotPassword opened this issue Jan 22, 2024 · 2 comments
Assignees
@forgotPassword
Labels
bug Something isn't working

Comments

@forgotPassword
Copy link

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
Copy link
Owner

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
Copy link
Author

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 amirshnll added the bug Something isn't working label Feb 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@forgotPassword forgotPassword

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@forgotPassword @amirshnll