I have a responsive PHP website that I'm trying to incorporate some scripting into. Currently all functionality works well in PCs using:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
The problem I'm having is that some functionality doesn't work in iOS devices. For these to work I need to use:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js">/script>
However, adding all of the references together causes several problems through the site (especially in PCs):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js">/script>
The site is already designed to respond to all device resolutions/orientations. Note this is a PHP site. What is the recommended and most efficient way to structure the references so only PCs get the jquery script and mobile devices the rest? I found a post about using $_SERVER['HTTP_USER_AGENT'] and then including just the non-mobile portion of the jquery script for PCs with PHP code, but wanted to hear pros/cons from people with experience on what would be a good solution
Here is a sample problem I'm getting if I include both PC and mobile jquery references. Click here to see the test page live tampary.com/test.php?c_id=15&p_id=0&f_id=1&l_id=2. It's a form submit that when posted it's duplicating the input button. If I remove the jquery mobile problem is gone. After you click on the link, click back in your browser and you will see the replication. Happens in Chrome and Firefox at least.