Skip to main content
eytanrose
Inspiring
March 26, 2017
Answered

How can I get the actual display size in canvas?

  • March 26, 2017
  • 1 reply
  • 919 views

I am making an element in Animate CC (html5 canvas) that will be integrated in an html5 page with WordPress.

This element contains a navigation bar. Apparently this navigation bar looks to small when displayed on mobile phones.

I can tell it to be bigger depending on the width of the window, but that's in pixels and a "normal" display in desktop browsers uses less pixels than a very small display on mobile phones. They use different DPI.

I tried to use "Capabilities.screenDPI" but Html5 Canvas doesn't seem to recognize this command.

Bottom line - How can I get the actual display size, in inches or millimeters?

Note: I am an animator, not a programmer. I'm doing this in AS3 and learning it as I go but advanced JS is beyond my skill set...

This topic has been closed for replies.
Correct answer eytanrose

Never mind, I figured it out....

I used: "window.devicePixelRatio".

1 reply

kglad
Community Expert
Community Expert
March 26, 2017

you can use navigator.mimeTypes:

if(navigator.mimeTypes["application/x-shockwave-flash"]==undefined){

// it's probably a mobile

}

eytanrose
eytanroseAuthor
Inspiring
March 27, 2017

I need not only to know IF it's a mobile, but to know the size itself, so I can know by what number I should scale the navigation bar.

I'm googling so many optional expressions (screenDpiX, devicePixelRatioX, canvas.screenResolutionX and what not...) - none of them seems to give me what I need (or at least be recognized by html5)

eytanrose
eytanroseAuthorCorrect answer
Inspiring
March 28, 2017

Never mind, I figured it out....

I used: "window.devicePixelRatio".