前端样式兼容问题

application/index/view/recharge/index.html

@@ -4,13 +4,16 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="divport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="/assets/frontend/recharge/reset.css">
     <link rel="stylesheet" href="/assets/frontend/recharge/icon.css">
     <title>充值</title>
     <style>
         .page {
-             height: 100vh;
-        }
+            height: 100vh;
+            width: 100%;
+            overflow: hidden;
+         }
         .content{
             padding-top: 0.40rem;
             display: flex;
@@ -189,8 +192,24 @@
             background: linear-gradient(90deg, #629CFF, #7870F1);
             color: #FFFFFF;
         }
-    
+        @media(max-width: 500px) {
+             .content{
+                width: 100%;
+             }
+             .phone-wrap{
+                width: 100%;
+             }
+             .recharge-wrap{
+                width: 100%;
+             }
+            .mode-wrap{
+                width: 100%;
 
+             }
+            .mode-item{
+                width: 100%;
+            }
+        }
 
     </style>
     <script>
@@ -288,4 +307,38 @@
         console.log($(".rcId").val());
     });
 
+</script>
+<script>
+    !(function(win, doc) {
+        function $_getDevice() {
+            var docEl = doc.documentElement;
+            const winWidth = docEl.clientWidth;
+            if(winWidth - 1 < 750){
+                return 'mobile'
+            }else if(winWidth - 1 < 1400){
+                return 'book'
+            }else {
+                return 'pc'
+            }
+        }
+
+        function setFontSize() {
+            var docEl = doc.documentElement;
+            var winWidth = docEl.clientWidth;
+            var device = $_getDevice();
+            var designSize =  device == 'mobile' ? 750 : (device == 'book' ? 1400 : 1920);
+            var scaleV = 100;
+            if(device == 'mobile'){
+                scaleV = 200
+            }
+            doc.documentElement.style.fontSize = (winWidth / designSize) * scaleV + "px";
+        }
+        var userAgent = navigator.userAgent;
+        win.addEventListener("resize", function() {
+            if (navigator.userAgent !== userAgent) {
+                location.reload();
+            }
+        });
+        setFontSize();
+    })(window, document);
 </script>