Ios 需要通过本地主机在iphone safari上识别deviceorientation
我正在构建一个需要从iphone读取设备定位值的移动网络，以及获取该值的另一个网页 这个项目将在展会上展出，所以我计划使用USB通过localhost连接手机和macbook，以实现实时响应 但当我在iphone上通过连接到本地主机看到它时，无法读取设备方向值 我按照此说明将设备连接到localhost，连接工作正常，因此我可以在手机上看到它。我检查了其他功能，比如识别被点击的按钮是否实时工作正常 当我将其部署到其他域并在电话上检查时，我可以看到设备定向工作，但我需要通过localhost使其工作 让我知道是否有任何线索是什么导致了这一切Ios 需要通过本地主机在iphone safari上识别deviceorientation,ios,safari,localhost,device-orientation,Ios,Safari,Localhost,Device Orientation,我正在构建一个需要从iphone读取设备定位值的移动网络，以及获取该值的另一个网页 这个项目将在展会上展出，所以我计划使用USB通过localhost连接手机和macbook，以实现实时响应 但当我在iphone上通过连接到本地主机看到它时，无法读取设备方向值 我按照此说明将设备连接到localhost，连接工作正常，因此我可以在手机上看到它。我检查了其他功能，比如识别被点击的按钮是否实时工作正常 当我将其部署到其他域并在电话上检查时，我可以看到设备定向工作，但我需要通过localhost使其
//mobile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Mobile PtoR</title>
<link rel="stylesheet" href="mobile_style.css" />
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-firestore.js"></script>
<style></style>
</head>
<body>
<div id="closewrapper"><button id="closebutton">x</button></div>
<div class="iconwrapper">
<div class="icons" id="AppBank"><p>Bank</p></div>
<div class="icons" id="AppWeather"><p>Weather</p></div>
<div class="icons" id="AppDict"><p>Dictionary</p></div>
<div class="icons" id="AppFb"><p>Facebook</p></div>
<div class="icons" id="AppCal"><p>Calendar</p></div>
</div>
<div class="sensorcheck">
<h1>Device Orientation API</h1>
<span id="do-unsupported" class="hidden"
>deviceorientation event not supported</span
>
<span id="dm-unsupported" class="hidden"
>devicemotion event not supported</span
>
<span id="cnc-unsupported" class="hidden"
>compassneedscalibration event not supported</span
>
<div id="do-results">
<div id="cube" class="cube">
<div class="face one">1</div>
<div class="face two">2</div>
<div class="face three">3</div>
<div class="face four">4</div>
<div class="face five">5</div>
<div class="face six">6</div>
</div>
<div id="do-info" class="hidden">
<p>
Coordinates: (<span id="beta" class="value">null</span>,
<span id="gamma" class="value">null</span>,
<span id="alpha" class="value">null</span>)
<br />
Position absolute?
<span id="is-absolute" class="value">unavailable</span>
</p>
</div>
<div id="dm-info" class="hidden">
<p>
Acceleration: (<span id="acceleration-x" class="value">null</span>,
<span id="acceleration-y" class="value">null</span>,
<span id="acceleration-z" class="value">null</span>) m/s<sup>2</sup>
</p>
<p>
Acceleration including gravity: (<span
id="acceleration-including-gravity-x"
class="value"
>null</span
>,
<span id="acceleration-including-gravity-y" class="value">null</span>,
<span id="acceleration-including-gravity-z" class="value">null</span>)
m/s<sup>2</sup>
</p>
<p>
Rotation rate: (<span id="rotation-rate-beta" class="value">null</span
>, <span id="rotation-rate-gamma" class="value">null</span>,
<span id="rotation-rate-alpha" class="value">null</span>)
</p>
<p>Interval: <span id="interval" class="value">0</span> milliseconds</p>
</div>
</div>
</div>
<script>
if (!window.DeviceOrientationEvent) {
document.getElementById("do-unsupported").classList.remove("hidden")
} else {
document.getElementById("do-info").classList.remove("hidden")
window.addEventListener("deviceorientation", function(event) {
document.getElementById(
"cube"
).style.webkitTransform = document.getElementById(
"cube"
).style.transform =
"rotateX(" +
event.beta +
"deg) " +
"rotateY(" +
event.gamma +
"deg) " +
"rotateZ(" +
event.alpha +
"deg)"
document.getElementById("beta").innerHTML = Math.round(event.beta)
document.getElementById("gamma").innerHTML = Math.round(event.gamma)
document.getElementById("alpha").innerHTML = Math.round(event.alpha)
document.getElementById("is-absolute").innerHTML = event.absolute
? "true"
: "false"
})
}
</script>
<!-- Custom fuctions of firebase-->
<script src="mobileFirebase.js"></script>
</body>
</html>
我昨天也有同样的问题。您的本地主机可能不是在https上运行，而是在http上运行。因此，设备定向的某些功能会被阻止。您只能在特定的时间内使用它们 简单的解决方案是通过隧道将本地服务器连接到外部，例如使用
或者为本地Web服务器制作自己的安全证书。也许你能找到一些信息。你好，Stefan！多亏了你的回答，我从你发布的最后一个链接中成功地用类似的方法设置了一个证书。因此，我的笔记本电脑和设备都是在同一证书的https上运行的。但现在它无法从设备中实时获取我想要的deviceorientation传感器值。有一个巨大的延迟。你有什么线索可以让我做到实时吗？嗨，承美，很遗憾我没有那么深入地参与到这个话题中。但我的第一个猜测是，您可能在证书中使用了旧的加密方法。也许可以帮你找到一些技巧来优化你的连接
//mobileFirebase.js
//the value is passed to firebase
var firebaseConfig = {
--------
}
firebase.initializeApp(firebaseConfig)
var firestore = firebase.firestore()
/* define things to be used*/
const AppBank = document.querySelector("#AppBank")
const AppWeather = document.querySelector("#AppWeather")
const AppDict = document.querySelector("#AppDict")
const AppFb = document.querySelector("#AppFb")
const AppCal = document.querySelector("#AppCal")
const closewrapper = document.querySelector("#closewrapper")
const closebutton = document.querySelector("#closebutton")
//const CurrentStatus = "landing"
const DOsensorRef = firestore.doc("status/DOsensor")
const docRef = firestore.doc("status/ClickStatus")
/* device orientation */
if (!window.DeviceOrientationEvent) {
document.getElementById("do-unsupported").classList.remove("hidden")
} else {
document.getElementById("do-info").classList.remove("hidden")
window.addEventListener("deviceorientation", function(event) {
const val_beta = Math.round(event.beta)
const val_gamma = Math.round(event.gamma)
const val_alpha = Math.round(event.alpha)
console.log(
"beta : ",
val_beta,
"gamma : ",
val_gamma,
"alpha : ",
val_alpha
)
DOsensorRef.set({
fire_beta: val_beta,
fire_alpha: val_alpha,
fire_gamma: val_gamma
})
.then(function() {
console.log("in sync")
})
.catch(function(error) {
console.log(error)
})
})
}
/* status recognize */
closebutton.addEventListener("click", function(){
closewrapper.style.display="none"
const CurrentStatus = "Landing"
docRef.set({
AppStatus: CurrentStatus
})
.then(function() {
console.log("Status changed!")
})
.catch(function(error) {
console.log("got an error: ", error)
})
})
AppBank.addEventListener("click", function() {
const CurrentStatus = "Bank"
docRef.set({
AppStatus: CurrentStatus
})
.then(function() {
console.log("Status changed!")
})
.catch(function(error) {
console.log("got an error: ", error)
})
closewrapper.style.display="block"
})
AppWeather.addEventListener("click", function() {
const CurrentStatus = "Weather"
docRef.set({
AppStatus: CurrentStatus
})
.then(function() {
console.log("Status changed!")
})
.catch(function(error) {
console.log("got an error: ", error)
})
closewrapper.style.display="block"
})
AppDict.addEventListener("click", function() {
const CurrentStatus = "Dictionary"
docRef.set({
AppStatus: CurrentStatus
})
.then(function() {
console.log("Status changed!")
})
.catch(function(error) {
console.log("got an error: ", error)
})
closewrapper.style.display="block"
})
AppFb.addEventListener("click", function() {
const CurrentStatus = "Facebook"
docRef.set({
AppStatus: CurrentStatus
})
.then(function() {
console.log("Status changed!")
})
.catch(function(error) {
console.log("got an error: ", error)
})
closewrapper.style.display="block"
})
AppCal.addEventListener("click", function() {
const CurrentStatus = "Calendar"
docRef.set({
AppStatus: CurrentStatus
})
.then(function() {
console.log("Status changed!")
})
.catch(function(error) {
console.log("got an error: ", error)
})
closewrapper.style.display="block"
})