I'm assuming you're using the <canvas> element as it's the graphical foundation for most games.
If that's the case you need to ensure that you only ever resize it using its inline width and height attributes. By inline, I mean the ones are literally embedded in the html:
<canvas width="--your width--" height="--your height--">
</canvas>
What you want to make sure is that there is no other sizing being applied to your canvas.
None of this:
/* style.css */
canvas {
transform: scale(1.5, 1.5);
}
And even none of this:
/* style.css */
canvas {
width: 100%;
height: 100%;
}
The thing is that the number of pixels of resolution that a canvas has to work with is defined only by its inline width and height attributes. If you want your canvas to have the same resolution as your phone screen you need to use javascript to modify its width and height whenever the screen size changes:
/* thing.js */
var resizeCanvas = function() {
var canvasElem = getYourCanvasElement();
canvasElem.width = getWidthOfScreen();
canvasElem.height = getHeightOfScreen();
}
// Make sure canvas fits initially...
whenPageLoads(resizeCanvas);
// And then resize it whenever needed
whenScreenSizeChanges(resizeCanvas);
Of course I don't know what frameworks you're using so that code is just a template. You need to decide how to implement getYourCanvasElement, getWidthOfScreen, getHeightOfScreen, whenPageLoads, and whenScreenSizeChanges.
EDIT: One other thing that may be affect the size of your canvas is the browser viewport scaling. There's good insight into that here.
