Why is this Canvas element larger than specified?

[eeeee]

I have been trying some things using Widgets. This was a small test to encode phone numbers in a novel QR image.
It uses canvas element width 400px.
On desktop it shows as 400 pixels, but on mobile its wider than the screen!
The mobile has around 1000pixel width so I dont know why its wider than it.

[phenomlab]

Because you've defined a static width at 400px

Set it to "auto"

[eeeee]

@phenomlab oh ok, thanks.
Why doesn't static 400 mean it is 400 then?

[phenomlab]

@eeeee What I mean by static is that it's set at 400px no matter what the screen estate is. Setting it to "auto" means it'll fit into it's parent div properly.

[eeeee]

@phenomlab ok, but I dont understand why even static 400 would be wider than a 1080 pixel mobile screen?

[phenomlab]

@eeeee Because a 1080 pixel mobile screen does not mean 1080px wide. If you look at how responsive CSS works in Bootstrap (breakpoints) you'll see what I mean.

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res displays */ }

The "sweet spot" for most mobile devices sits at around 767px