HTML 5 WebGL (TM) Library

Responsive and Mobile Layouts with taccgl™

taccgl™ does not specifically detect mobile devices or small displays. However, mobile devices usually have significantly less power than laptops or desktop computers and so animations might run slower. Note that taccgl™ constantly monitors the frame rate of a running animation and if it becomes too slow it disables some features or possibly disables taccgl™ completely. This is done in an effort to still show the sites content possibly without animations.

So for mobile devices, it is most important to create performant animations, because slow animations might not perform well or not appear at all. One of the most important factors for taccgl™, canvas, and WebGL™ performance is the number of pixels the animations is rendered to. Therefore it is very important to create a mobile or responsive site that really uses the small screen resolution of a mobile device. taccgl™ often can't show a resized (minimized) desktop page on a mobile device, because that means internally performing the animation in full desktop resolution, which might be too much for the GPU of a mobile device.

taccgl™ normally plays animations full screen (or full window). If the performance is slow, then the animation canvas is reduced, playing the animation only in part of the window. Using LQCanvas and NQCanvas that part can be selected.

Checklist for Mobile and Responsive Sites with taccgl™

  • create a site that honors the screen resolution of the device, do not resize/minimize a higher resolution page,
  • adapt taccgl_texCanWidth and taccgl_texCanHeight parameters to the smaller resolution, see Library Options,
  • use LQCanvas and NQCanvas to select portions of the screen to run the animation on for slower devices,
  • keep animations simple, also see Performance

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:2D Canvas Context
Previous Page: Debugging