mobile detect pls

OSU-Sustainability-Office · Aug 7, 2023 · 81d9300 · 81d9300
1 parent 483e04b
commit 81d9300
Showing 1 changed file with 15 additions and 31 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -139,38 +139,22 @@ body {
 <style scoped lang="scss">
 @import '@/assets/style-variables.scss';
 
-@media screen and (max-width: 768px) {
-.app {
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  min-height: 100%;
-  width: 100%;
-}
-.header {
-  margin: 0;
-  padding: 0;
-  height: $--nav-height;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.main {
-  position: absolute;
-  top: $--nav-height;
-  left: 0;
-  min-height: calc(100% - #{$--nav-height});
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
+/* Media query for mobile devices */
+@media only screen and (max-width: 768px) {
+  body {
+    max-width: 100%;
+    overflow-x: hidden; /* Hide horizontal scrollbar */
+  }
 }
 
-@media screen and (min-width: 769px) {
+/* Feature detection for touch devices (phones and tablets) */
+@supports (-webkit-touch-callout: none) {
+  /* Apply styles specifically for touch devices here */
+  body {
+    max-width: 100%;
+    overflow-x: hidden; /* Hide horizontal scrollbar */
+  }
+}
 .app {
   padding: 0;
   margin: 0;
@@ -198,5 +182,5 @@ body {
   padding: 0;
   width: 100%;
 }
-}
+
 </style>