需要通过 localhost 在 iphone safari 上识别设备方向答案

【问题标题】：Need to make deviceorientation recognized on iphone safari through localhost需要通过 localhost 在 iphone safari 上识别设备方向
【发布时间】：2019-08-12 03:48:44
【问题描述】：

我正在构建一个需要从 iphone 读取设备方向值的移动网络，以及获取该值的其他网页。

这个项目要在展会上展出，所以我打算用USB通过localhost连接手机和macbook进行实时响应。

但是当我通过将它连接到本地主机在 iphone 上看到它时，无法读取设备方向值。

https://medium.com/@wiekatz/testing-web-applications-running-on-localhost-with-an-iphone-7db6258b8f2

我按照此说明将设备连接到本地主机，并且连接工作正常，因此我可以在手机上看到它。我检查了其他功能（例如识别已单击哪个按钮）是否可以实时正常工作。

当我将它部署到其他域并在手机上检查时，我可以看到设备方向正常工作，但我需要通过 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>

//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"

})

【问题讨论】：

标签： ios safari localhost device-orientation

【解决方案1】：

我昨天遇到了同样的问题。您的本地主机可能不在 https 上运行，而是在 http 上运行。因此，作为设备方向的某些功能会被阻止。您只能在 secure context 中使用它们。

简单的解决方案是将本地服务器隧道连接到外部，例如https://localtunnel.github.io/www/

或为您的本地网络服务器制作自己的安全证书。也许你可以找到一些信息here。

【讨论】：

嗨斯特凡！感谢您的回答，我设法使用您发布的最后一个链接中的类似方法设置了证书。所以我的笔记本电脑和设备都在来自同一个证书的 https 上运行。但是现在它无法像我想要的那样实时从设备获取设备方向传感器值。有很大的延迟。您知道如何实时管理吗？
嗨，Seungmee，很遗憾，我对这个主题并没有那么深入。但我的第一个猜测是，您可能在证书中使用了旧的加密方法。也许istlsfastyet.com 可以帮助您找到一些技巧来优化您的连接