Our charts have mostly been designed for desktop browsers. While Highcharts works in a large variety of browsers (including mobile browsers on Android and iPhone; see http://www.highcharts.com/documentation/compatibility for more details), we haven't really designed our charts for these devices. This recipe will look at how we can use jQuery Mobile to make pages more mobile-friendly.
To get started, perform the following steps:
Define the base HTML page as follows:
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script> </head> <body> <...