Let my javascript function be displayed in fullscreen on ipad

Question

i wrote a javascript game that can be played in the browser. When im playing it on an ipad, it is too big, and you have to scroll to see everything.

How can i adjust it to be always as big as the screen size of the ipad if it is played on it?

Answer 1

You probably need this:

<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

More reading here: meta "viewport" device-width: Wrong width small on Opera Mobile 9.7 (10 works)

From here on you have to calculate with screen.width and height values to properly scale, but with the previous meta you'll atleast have a consistent value regarding screen dimensions.

Answer 2

Try to setup this <meta> tag in your html head section

<meta name="viewport" content="width=device-width">

If that is not enough, use css media queries to further customize your elements for mobile devices, like

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over */
}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over */
}