Am working on a of mobile version of a web page where i query data from fusion table. My code is working with all the desktop browser but not with mobile browser. this project is meant for mobile phone but i dont know where the problem is.
Here is My code

[p]<link href="style/mobile.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript">
(function(doc) {

var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}

if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}

}(document));
</script>

<script type="text/javascript">
$(document).ready(function(e) {
var getCountyList = function(){
$.ajax({
url: "http://api.iebc.or.ke/county/?token=afd3877583a07e5b77e447332bb98a80",
async: true,
dataType: 'json',
success: function(data){
var counties = data.region['locations'];
$('#county').html("<option value='all'>Select County</option>")
$.each(counties, function(c, county){
$option = $('<option value="'+county.code+'">'+county.name+'</option>');
$('#county').append($option)
getTotals("http://vote.iebc.or.ke/totals/?type=county&name="+county.name, "County",county.name)
})
}
});
}

$('#county').change(function(){
$('#mobile-ps-body').html("")
val = $(this).children("option:selected").val()
getConstituencyList(val)
});

var getConstituencyList = function(county){
$('#constituency').html('<option value="select">Select Constituency</option>').removeAttr('disabled');
$.ajax({
url:"http://api.iebc.or.ke/constituency/?county="+county+"&token=afd3877583a07e5b77e447332bb98a80",
async:true,
dataType:'json',
success:function(data){
$('#constituency').html('<option value="all">All Constituencies</option>').removeAttr('disabled');
var constituencies = data.region['locations'];
$.each(constituencies, function(c, constituency){
$option = $('<option value="'+constituency.code+'">'+constituency.name+'</option>');
$('#constituency').append($option)
getTotals('http://vote.iebc.or.ke/totals/?type=constituency&name='+constituency.name,"Constituency", constituency.name)
})
}
});

}

$('#constituency').change(function(){
$('#mobile-ps-body').html("")
var val = $(this).children("option:selected").val()
var txt = $(this).children("option:selected").text()
getWardList(val)
getTotals('http://vote.iebc.or.ke/ward/?constituency='+txt, "Ward", txt);
});

var getWardList = function(concode){
$('#ward').html('<option value="select">Select Ward...</option>')
$('#mobile-ps-body').html("")
$.ajax({
url: "http://api.iebc.or.ke/ward/?constituency="+concode+"&token=afd3877583a07e5b77e447332bb98a80",
async: true,
dataType: 'json',
success: function(data){
$('#ward').html('<option value="all">All Wards</option>').removeAttr('disabled');
counties = data.region['locations'];
$.each(counties, function(c, wards){
$option = $('<option value="'+wards.name+'">'+wards.name+'</option>');
$('#ward').append($option)
})
}
});
}
var setWardData = function(wtotals){
$.each(wtotals, function(p, pols){
var color;
if(pols.percentage>100){
color="#eeca02"
}
else{
color="#46A24A"
}
var $ps = $("<span></span>");
if(pols.percentage!=undefined){
$ps = $("<div class='result-row'> \
<div class='title'><strong>"+pols.name+"Ward</strong></div> \
<div class='perc' style='color:"+color+"'>"+pols.percentage+"%</div> \
<table> \
<tr> \
<td>Registered: "+pols.registered+"</td> \
</tr> \
<tr> \
<td>Estimated: "+pols.estimated+"</td> \
</tr> \
<tr> \
<td>Population: "+pols.population+"</td> \
</tr> \
</table> \
</div>");
$('#mobile-ps-body').append($ps)
}
//

})
}
var getTotals = function(url, ed, name){
$.ajax({
url: url,
async: true,
dataType: 'json',
success: function(data){
pols = data.results;
if(ed=="Ward"){
setWardData(pols)
}
else{
var color;
if(pols.percentage>100){
color="#eeca02"
}
else{
color="#46A24A"
}
var $ps = $("<span></span>");
if(pols.percentage!=undefined){
$ps = $("<div class='result-row'> \
<div class='title'><strong>"+name+" "+ed+"</strong></div> \
<div class='perc' style='color:"+color+"'>"+pols.percentage+"%</div> \
<table> \
<tr> \
<td>Registered: "+pols.registered+"</td> \
</tr> \
<tr> \
<td>Estimated: "+pols.estimated+"</td> \
</tr> \
<tr> \
<td>Population: "+pols.population+"</td> \
</tr> \
</table> \
</div>");
$('#mobile-ps-body').append($ps)
}
//
}
}
})
}
getCountyList()
});
</script>
[/p]