0

My website which is a one page or section website has a canvas with height and width of the browser or window it is opened in, I have used windows.innerWidth and windows.innerHeight to assign values to it(canvas) and it works properly in every other web browser, be it mobile or desktop but when the page is opened in the In-App Browser from a post in Facebooks app, The canvas doesn't considers the bottom bookmarks bar by the browser Hence the footer as well as the game paddle ( cushion ) appears hidden.

I also noticed that the paddles when opened in safari of the same device looks smaller where as the paddles in Facebooks in app browser looks bigger ( even the paddles height and width are assigned using the windows innerWidth and innerHeight values ).

I tried all of the meta tags for an entire day yesterday and checked online for similar issues as well so as to fix mine but i couldn't. I hope i was discrete enough in explaining my issue, I'll be attaching pictures of the website opening in the same device but in Safari and the In App browser for better understanding.

Thank you!

Image

Cassiopere
  • 1
  • 3
  • Have you tried using the viewport width and viewport height CSS properties to achieve the same result, or are you looking for a JS solution? Maybe try checking whether [these solutions can help](http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript) you if youre looking for a JS fix – S.V. Aug 19 '16 at 08:58
  • Sir the canvas is supposed to take the full width and height of the window it is opened in so i used Javascript to assign the canvas the exact resolution of the browser it is opened in, Vh and Vw values are used for various other elements on the page but the width and height values of the canvas are inline values http://i.imgur.com/JU4BOr4.png – Cassiopere Aug 19 '16 at 09:31
  • Show us your JS code. Throwing in an answer in the meantime. – S.V. Aug 19 '16 at 09:43

1 Answers1

0

Try using

var w = Math.min(document.documentElement.clientWidth, window.innerWidth || 0)

var h = Math.min(document.documentElement.clientHeight, window.innerHeight || 0)

to set the height and width that you're using.

S.V.
  • 1,181
  • 6
  • 23
  • Hey sir, It didn't fix the issue, I checked the answer from the url you posted in the comments itself and just checked on the device, It still has the footer hidden. The width and height were assigned to the canvas via canvas.width = window.innerWidth. canvas.height = window.innerHeight. – Cassiopere Aug 19 '16 at 10:08