diff --git a/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.css b/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.css
index 381c2e5a0c0218ca18cf5faec83103cebff5a14a..836e32b821f3c7ac41dba1f1ac463e72ebd48116 100644
--- a/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.css
+++ b/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.css
@@ -18,21 +18,17 @@
     height: 100%;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     background-image: url(common/media/bg_blurry.png);
     background-size: cover;
     background-position: center center;
-    padding-start: 64px;
-    padding-end: 64px;
-}
-
-.title_section {
-    margin-top: 10%;
-    flex-direction: row;
-    justify-content: center;
+    padding-start: 6%;
+    padding-end: 6%;
 }
 
 .title {
-    font-size: 48px;
+    width: 100%;
+    margin-top: 10%;
     color: #FFF;
     text-align: center;
 }
@@ -49,7 +45,7 @@
 }
 
 .progress_section {
-    margin-bottom: 48px;
+    margin-bottom: 4%;
     flex-direction: column;
 }
 
@@ -60,17 +56,13 @@
 }
 
 .progress_time {
-    height: 32px;
     color: #FFF;
     text-align: center;
-    font-size: 24px;
 }
 
 .total_time {
-    height: 32px;
     color: #FFF;
     text-align: center;
-    font-size: 24px;
 }
 
 .music_slider {
@@ -82,14 +74,15 @@
 
 .control_section {
     width: 100%;
+    height: 10%;
     justify-content: space-between;
     flex-direction: row;
-    margin-bottom: 48px;
+    margin-bottom: 4%;
 }
 
 .control_button {
-    height: 96px;
-    width: 96px;
+    width: 20%;
+    aspect-ratio: 1;
 }
 
 .txt {
diff --git a/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.hml b/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.hml
index 63ecf4bba9228d142baf75ab53dee9b078132e23..a4b6fd501643011308e89fed02abacdc3f091977 100644
--- a/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.hml
+++ b/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.hml
@@ -14,30 +14,30 @@
  */-->
 
 <div class="container">
-    <div class="title_section">
-        <text class="title">
+    <div show="{{ hasInitialized }}" style="width : {{ risw }} px; height : {{ rish }} px; flex-direction : column;">
+        <text class="title" style="font-size : {{ riscale * 48 }} px;">
             {{ title }}
         </text>
-    </div>
-    <div class="album_section">
-        <image class="album_image" src="{{ albumSrc }}">
-        </image>
-    </div>
-    <div class="progress_section">
-        <div class="timer">
-            <text class="progress_time">{{ currentTimeText }}
-            </text>
-            <text class="total_time">{{ totalTimeText }}
-            </text>
+        <div class="album_section">
+            <image class="album_image" src="{{ albumSrc }}">
+            </image>
+        </div>
+        <div class="progress_section">
+            <div class="timer">
+                <text class="progress_time" style="font-size : {{ riscale * 32 }} px;">{{ currentTimeText }}
+                </text>
+                <text class="total_time" style="font-size : {{ riscale * 32 }} px;">{{ totalTimeText }}
+                </text>
+            </div>
+            <slider id="slider" value="{{ currentProgress }}" onchange="setProgress"
+                    class="music_slider"/>
+        </div>
+        <div class="control_section">
+            <image class="control_button" onclick="onContinueAbilityClick" src="/common/media/ic_hop.svg"/>
+            <image class="control_button" onclick="onPreviousClick" src="/common/media/ic_play_previous.svg"/>
+            <image class="control_button" onclick="onPlayClick" src="{{ btnPlaySrc }}"/>
+            <image class="control_button" onclick="onNextClick" src="/common/media/ic_play_next.svg"/>
         </div>
-        <slider id="slider" value="{{ currentProgress }}" onchange="setProgress"
-                class="music_slider"/>
-    </div>
-    <div class="control_section">
-        <image class="control_button" onclick="onContinueAbilityClick" src="/common/media/ic_hop.svg"/>
-        <image class="control_button" onclick="onPreviousClick" src="/common/media/ic_play_previous.svg"/>
-        <image class="control_button" onclick="onPlayClick" src="{{ btnPlaySrc }}"/>
-        <image class="control_button" onclick="onNextClick" src="/common/media/ic_play_next.svg"/>
     </div>
     <dialog id="continueAbilityDialog" class="dialog-main" oncancel="cancelDialog">
         <div class="dialog-div">
diff --git a/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.js b/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.js
index 961654902fe60a572c7b473f4d0381d285523fba..13c6e8481b89e7653dd4d14a09b6e38f4801b77c 100644
--- a/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.js
+++ b/ability/JsDistributedMusicPlayer/entry/src/main/js/default/pages/index/index.js
@@ -17,6 +17,7 @@ import featureAbility from '@ohos.ability.featureAbility';
 import RemoteDeviceModel from '../../../model/RemoteDeviceModel.js';
 import PlayerModel from '../../../model/PlayerModel.js';
 import KvStoreModel from '../../../model/KvStoreModel.js';
+import display from '@ohos.display';
 
 function getShownTimer(ms) {
     var seconds = Math.floor(ms / 1000);
@@ -33,6 +34,9 @@ function getShownTimer(ms) {
 
 const REMOTE_ABILITY_STARTED = 'remoteAbilityStarted';
 var DEVICE_LIST_LOCALHOST;
+const SYSTEM_UI_HEIGHT = 134;
+const DESIGN_WIDTH = 720.0;
+const DESIGN_RATIO = 16 / 9;
 
 export default {
     data: {
@@ -49,15 +53,42 @@ export default {
         kvStoreModel: new KvStoreModel(),
         isDialogShowing: false,
         isSwitching: false,
+        riscale: 1, // ratio independent scale ratio
+        risw: 720, // ratio independent screen width
+        rish: 1280, // ratio independent screen height
+        hasInitialized: false,
     },
     onInit() {
         console.info('MusicPlayer[IndexPage] onInit begin');
+        console.info("MusicPlayer[IndexPage] getDefaultDisplay begin");
+        display.getDefaultDisplay().then(dis => {
+            console.info("MusicPlayer[IndexPage] getDefaultDisplay dis=" + JSON.stringify(dis));
+            var proportion = DESIGN_WIDTH / dis.width;
+            var screenWidth = DESIGN_WIDTH;
+            var screenHeight = (dis.height - SYSTEM_UI_HEIGHT) * proportion;
+            self.riscale = (screenHeight / screenWidth) / DESIGN_RATIO;
+            if (self.riscale < 1) {
+                // The screen ratio is shorter than design ratio
+                self.risw = screenWidth * self.riscale;
+                self.rish = screenHeight;
+            } else {
+                // The screen ratio is longer than design ratio
+                self.risw = screenWidth;
+                self.rish = screenHeight / self.riscale;
+            }
+            self.hasInitialized = true;
+            console.info("MusicPlayer[IndexPage] proportion=" + proportion + ", screenWidth="
+            + screenWidth + ", screenHeight=" + screenHeight + ", riscale=" + self.riscale
+            + ", risw=" + self.risw + ", rish=" + self.rish);
+        });
+        console.info("MusicPlayer[IndexPage] getDefaultDisplay end");
         DEVICE_LIST_LOCALHOST = {
             name: this.$t('strings.localhost'),
             id: 'localhost',
         };
         this.deviceList = [DEVICE_LIST_LOCALHOST];
         let self = this;
+        self.currentTimeText = getShownTimer(0);
         this.playerModel.setOnStatusChangedListener((isPlaying) => {
             console.info('MusicPlayer[IndexPage] on player status changed, isPlaying=' + isPlaying + ', refresh ui');
             self.playerModel.setOnPlayingProgressListener((currentTimeMs) => {