Languages

Menu
Sites
Language
Precision viewport size.

Hi!

I have a canvas:
<canvas id="canvas" width="720" height="1280" >

When I run my app under the simulator, there is shifting about 5px. What a viewport's actual size?

Thanks.

List

Responses

4 Replies
Raghavendra Reddy Shiva

Simulator's Viewport is "360x640" in size. You can find the system information under "System Summary" section.

Artem Novikov

Thank your for answer, but I cant solve my problem. This is my code:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <script>
        window.onload = function() {
            var canvas = document.getElementById("canvas");
            
            context = canvas.getContext("2d");
            
            canvas.width = document.width; // width="720" 
            canvas.height = document.height - 10; //  height="1280" 
            
            context.moveTo(0, 0);
            context.lineTo(canvas.width, canvas.height);
            context.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas"> 
        This browser is not supported
    </canvas>
</body>
</html>

I want draw line exactly from top left corner of device screen to bottom right corner, but under Simulator/Emulator there is small backlash (arrow keys move screen around ~5px).

I found this trick is workable:

canvas.height = document.height - 10;

But it is not a solution.

Artem Novikov

Seems I found answer for my own question:

body { margin: 0px 0px 0px 0px; }
canvas { display: block; }
Raghavendra Reddy Shiva

That's great. This might help others too. Thanks for postings.