1、用js获取手机屏幕高度，然后你直接用absolute从上往下写top高度=屏幕高度-浮动条本身高度
2、做伪拖动，也就是并不是实际拖动手机的html高度，而是靠overflow的溢出属性，把需要拖动的内容放在上面的div里，然后用js动态判断手机屏高度然后再赋值。最下面的div本身不做任何浮动处理，直接跟在后面（不过这个也有坑，overflow的拖动体验不如原生拖动，手机不给力可能会一卡一卡的，需要webkit的属性支持）
顺便想到新的css3的flex结构，不过这个我自己没试验过，不知道能不能成为新的解决办法，愿意的话你自己也能试试。
Geolocation接口不可以获取手机的gps定位，这个api具有自己特有的定位方式。定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
用法如下：
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的位置：</p>
<button onclick="getLocation()">试一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo")
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError)
}
else{x.innerHTML="Geolocation is not supported by this browser."}
}
function showPosition(position)
{
lat=position.coords.latitude
lon=position.coords.longitude
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px'
mapholder.style.width='500px'
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions)
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"})
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break
}
}
</script>
</body>
</html>
我可以很负责人的告诉你，Geolocation接口不仅在PC上可以，在手机上更没有任何兼容问题，在所有手机浏览器上已经实现，只要手机有GPS模块，Geolocation就能用。
Geolocation接口只有一个问题，就是在调用时，会d出一个对话框，需要用户确认权限，才能使用，否则会调用失败。
下图可以看到，Geolocation接口被支持的非常好。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）