parent
c6e4a90a9f
commit
4fea967b43
10
README.md
10
README.md
|
@ -3,11 +3,19 @@
|
||||||
|
|
||||||
Uses [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent) to show a phone's polar orientation.
|
Uses [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent) to show a phone's polar orientation.
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Open [compass.keithirwin.us](https://compass.keithirwin.us/) on a smartphone with a compass. Hold the phone level and it should show your direction.
|
||||||
|
|
||||||
|
### Is this accurate?
|
||||||
|
|
||||||
|
No, not really. Results may vary. As of this writing, Firefox and Chrome browsers handle the DeviceOrientation spec differently. It's only been tested on Chrome for Android.
|
||||||
|
|
||||||
## Known issues
|
## Known issues
|
||||||
|
|
||||||
* When the screen is rotated, the image gets rotated 90 degrees. I don' know how this could be fixed.
|
* When the screen is rotated, the image gets rotated 90 degrees. I don' know how this could be fixed.
|
||||||
|
|
||||||
#### Image sources
|
## Image sources
|
||||||
|
|
||||||
The images used in this app were labeled for reuse with modification:
|
The images used in this app were labeled for reuse with modification:
|
||||||
|
|
||||||
|
|
48
index.html
48
index.html
|
@ -36,52 +36,8 @@
|
||||||
<meta name="msapplication-wide310x150logo" content="icons/mstile-310x150.png" />
|
<meta name="msapplication-wide310x150logo" content="icons/mstile-310x150.png" />
|
||||||
<meta name="msapplication-square310x310logo" content="icons/mstile-310x310.png" />
|
<meta name="msapplication-square310x310logo" content="icons/mstile-310x310.png" />
|
||||||
|
|
||||||
<style>
|
<link rel="stylesheet" href="style.css" />
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
background: #000;
|
|
||||||
color: #EEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#error {
|
|
||||||
color: #E00;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (orientation:portrait) {
|
|
||||||
img {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vw;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@media (orientation:landscape) {
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100vh;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#error { display: none; }
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: underline;
|
|
||||||
} a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
background: #000;
|
||||||
|
color: #EEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#error {
|
||||||
|
color: #E00;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation:portrait) {
|
||||||
|
main {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vw;
|
||||||
|
position: relative;
|
||||||
|
top:
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 95vw;
|
||||||
|
height: 95vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (orientation:landscape) {
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 95vh;
|
||||||
|
height: 95vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#error { display: none; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: underline;
|
||||||
|
} a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
Loading…
Reference in New Issue