diff --git a/static/css/sensor-2.css b/static/css/sensor-2.css
index 15f6bd7..da7522e 100644
--- a/static/css/sensor-2.css
+++ b/static/css/sensor-2.css
@@ -42,3 +42,20 @@ body,html {
     font-size:60px;
     color:white;
 }
+
+/* Responsive design */
+@media (max-width: 600px) {
+    .container-top {
+        font-size: 30px;
+    }
+
+    .container1 {
+        width: 90%;
+        height: 90%;
+    }
+
+    #temperature {
+        margin: 20px;
+        font-size: 40px;
+    }
+}
\ No newline at end of file
diff --git a/static/css/sensor-3.css b/static/css/sensor-3.css
index c439a2b..5ad5fd2 100644
--- a/static/css/sensor-3.css
+++ b/static/css/sensor-3.css
@@ -42,3 +42,20 @@ body,html {
     font-size:60px;
     color:white;
 }
+
+/* Responsive design */
+@media (max-width: 600px) {
+    .container-top {
+        font-size: 30px;
+    }
+
+    .container1 {
+        width: 90%;
+        height: 90%;
+    }
+
+    #temperature {
+        margin: 20px;
+        font-size: 40px;
+    }
+}
\ No newline at end of file
diff --git a/static/css/sensor-4.css b/static/css/sensor-4.css
index 9f93d7d..814bbb3 100644
--- a/static/css/sensor-4.css
+++ b/static/css/sensor-4.css
@@ -42,3 +42,20 @@ body,html {
     font-size:60px;
     color:white;
 }
+
+/* Responsive design */
+@media (max-width: 600px) {
+    .container-top {
+        font-size: 30px;
+    }
+
+    .container1 {
+        width: 90%;
+        height: 90%;
+    }
+
+    #temperature {
+        margin: 20px;
+        font-size: 40px;
+    }
+}
\ No newline at end of file
diff --git a/static/js/sensor-1.js b/static/js/sensor-1.js
index c699b17..d437839 100644
--- a/static/js/sensor-1.js
+++ b/static/js/sensor-1.js
@@ -8,8 +8,9 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch('http://111.230.197.156:8000/get_sensor_data')
             .then(response => response.json())
             .then(data => {
-                timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳
-                temperatures = data.temperatures.slice(-200); // 只保留最新的200个温度数据
+                var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
+                    timestamps = data.timestamps.slice(-maxDataPoints);
+                    temperatures = data.temperatures.slice(-maxDataPoints);
 
                 updateChart();
             });
@@ -51,4 +52,4 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // 每5秒获取最新的数据
     setInterval(fetchLatestData, 1000);
-});
\ No newline at end of file
+});
diff --git a/static/js/sensor-2.js b/static/js/sensor-2.js
index 538c106..3465126 100644
--- a/static/js/sensor-2.js
+++ b/static/js/sensor-2.js
@@ -86,8 +86,10 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch('http://111.230.197.156:8000/get_sensor_data')
             .then(response => response.json())
             .then(data => {
-                timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳
-                humidities = data.humidities.slice(-200); // 只保留最新的200个湿度数据
+                var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
+                    timestamps = data.timestamps.slice(-maxDataPoints);
+                    humidities = data.humidities.slice(-maxDataPoints);
+                
 
                 updateChart();
             });
diff --git a/static/js/sensor-3.js b/static/js/sensor-3.js
index b22c5fe..9635884 100644
--- a/static/js/sensor-3.js
+++ b/static/js/sensor-3.js
@@ -87,8 +87,10 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch('http://111.230.197.156:8000/get_sensor_data')
             .then(response => response.json())
             .then(data => {
-                timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳
-                co2 = data.co2.slice(-200); // 只保留最新的200个CO2数据
+                var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
+                    timestamps = data.timestamps.slice(-maxDataPoints);
+                    co2 = data.co2.slice(-maxDataPoints);
+                
 
                 updateChart();
             });
diff --git a/static/js/sensor-4.js b/static/js/sensor-4.js
index 8905426..30ffab2 100644
--- a/static/js/sensor-4.js
+++ b/static/js/sensor-4.js
@@ -88,9 +88,10 @@ document.addEventListener('DOMContentLoaded', function () {
         fetch('http://111.230.197.156:8000/get_sensor_data')
             .then(response => response.json())
             .then(data => {
-                timestamps = data.timestamps.slice(-200); // 只保留最新的200个时间戳
-                pressure = data.pressure.slice(-200); // 只保留最新的200个压力数据
-
+                var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
+                timestamps = data.timestamps.slice(-maxDataPoints);
+                pressure = data.pressure.slice(-maxDataPoints);
+                
                 updateChart();
             });
     }
diff --git a/templates/sensor-2.html b/templates/sensor-2.html
index e98d671..308605f 100644
--- a/templates/sensor-2.html
+++ b/templates/sensor-2.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Title</title>
     <link rel="stylesheet" href="../static/css/sensor-2.css">
 </head>
diff --git a/templates/sensor-3.html b/templates/sensor-3.html
index 10e9b14..e5848a8 100644
--- a/templates/sensor-3.html
+++ b/templates/sensor-3.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Title</title>
     <link rel="stylesheet" href="../static/css/sensor-3.css">
 </head>
diff --git a/templates/sensor-4.html b/templates/sensor-4.html
index 5f9a925..5dceeda 100644
--- a/templates/sensor-4.html
+++ b/templates/sensor-4.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Title</title>
     <link rel="stylesheet" href="../static/css/sensor-4.css">
 </head>