Issues with loading jQuery on the iPhone

Issues with loading jQuery on the iPhone

New to jQuery, but have some light familiarity with javascript and basic web design. I am trying to build a web app for personal use, sort of a party gimmick. I built it with the code below and it works like a charm in Chrome while testing it out with my computer, but upon transferring it to the phone with DiskAid and loading it into Safari using :file//, it breaks. The CSS formatting is completely gone, and I am left with the top button (which does not play the sound on the phone), an outline of where the picture should be, and two dots below the picture. All of the subpages are on the same page, formatted identically.

Here is the code:


<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="jquery.js">
</script>
<script src="jquery.mobile-1.1.1.js">
</script>
<script src="my.js">
</script>
<audio src="sounds/sound1.mp3" id="load"></audio>
</head>
<body>

<!-- Bladed Pinions -->
<div data-role="page" data-theme="a" id="bladedpinions">
<div data-role="content" style="padding: opx">
<input id="Loader" type="button" data-theme="b" data-icon="arrow-u" data-iconpos="left" value="Load into Armory Matrix" data-mini="true"/ onclick=load.play();>
<div style=" text-align:center">
<img style="width: 288px; height: 400px" src="images/bladedpinions.jpg" />
</div>
<div id="Nav" data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#bladedbracers" data-theme="b" data-icon="arrow-l" data-transition="slide" data-direction="reverse">
</a>
</li>
<li>
<a href="#silverskinarmor" data-theme="b" data-icon="arrow-r" data-transition="slide"></a>
</li>
</ul>
</div>
</div>
</div>
<script>
//App custom javascript
</script>
<!-- Silverskin Armor -->
<div data-role="page" data-theme="a" id="silverskinarmor">
<div data-role="content" style="padding: opx">
<input id="Loader" type="button" data-theme="b" data-icon="arrow-u" data-iconpos="left" value="Load into Armory Matrix" data-mini="true"/ onclick=load.play();>
<div style=" text-align:center">
<img style="width: 288px; height: 400px" src="images/silverskinarmor.jpg" />
</div>
<div id="Nav" data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#bladedpinions" data-theme="b" data-icon="arrow-l" data-transition="slide" data-direction="reverse">
</a>
</li>
<li>
<a href="#bladedbracers" data-theme="b" data-icon="arrow-r" data-transition="slide"></a>
</li>
</ul>
</div>
</div>
</div>
<script>
//App custom javascript
</script>

<!-- Bladed Bracers -->
<div data-role="page" data-theme="a" id="bladedbracers">
<div data-role="content" style="padding: opx">
<input id="Loader" type="button" data-theme="b" data-icon="arrow-u" data-iconpos="left" value="Load into Armory Matrix" data-mini="true"/ onclick=load.play();>
<div style=" text-align:center">
<img style="width: 288px; height: 400px" src="images/bladedbracers.jpg" />
</div>
<div id="Nav" data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#silverskinarmor" data-theme="b" data-icon="arrow-l" data-transition="slide" data-direction="reverse">
</a>
</li>
<li>
<a href="#bladedpinions" data-theme="b" data-icon="arrow-r" data-transition="slide">
</a>
</li>
</ul>
</div>
</div>
</div>
<script>
//App custom javascript
</script>
</body>

</html>

Any help would be appreciated. I will be checking to see if mobile Chrome plays nicely with it in the meantime. Thanks!