diff --git a/api-extractor/report/hls.js.api.md b/api-extractor/report/hls.js.api.md
index 1652f30bcd6..196fc044df6 100644
--- a/api-extractor/report/hls.js.api.md
+++ b/api-extractor/report/hls.js.api.md
@@ -960,6 +960,7 @@ export type HlsConfig = {
     enableWorker: boolean;
     enableSoftwareAES: boolean;
     minAutoBitrate: number;
+    ignoreDevicePixelRatio: boolean;
     loader: {
         new (confg: HlsConfig): Loader<LoaderContext>;
     };
@@ -2151,17 +2152,17 @@ export interface UserdataSample {
 // Warnings were encountered during analysis:
 //
 // src/config.ts:163:3 - (ae-forgotten-export) The symbol "ILogger" needs to be exported by the entry point hls.d.ts
-// src/config.ts:172:3 - (ae-forgotten-export) The symbol "AudioStreamController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:173:3 - (ae-forgotten-export) The symbol "AudioTrackController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:175:3 - (ae-forgotten-export) The symbol "SubtitleStreamController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:176:3 - (ae-forgotten-export) The symbol "SubtitleTrackController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:177:3 - (ae-forgotten-export) The symbol "TimelineController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:179:3 - (ae-forgotten-export) The symbol "EMEController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:182:3 - (ae-forgotten-export) The symbol "CMCDController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:184:3 - (ae-forgotten-export) The symbol "AbrController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:185:3 - (ae-forgotten-export) The symbol "BufferController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:186:3 - (ae-forgotten-export) The symbol "CapLevelController" needs to be exported by the entry point hls.d.ts
-// src/config.ts:187:3 - (ae-forgotten-export) The symbol "FPSController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:173:3 - (ae-forgotten-export) The symbol "AudioStreamController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:174:3 - (ae-forgotten-export) The symbol "AudioTrackController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:176:3 - (ae-forgotten-export) The symbol "SubtitleStreamController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:177:3 - (ae-forgotten-export) The symbol "SubtitleTrackController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:178:3 - (ae-forgotten-export) The symbol "TimelineController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:180:3 - (ae-forgotten-export) The symbol "EMEController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:183:3 - (ae-forgotten-export) The symbol "CMCDController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:185:3 - (ae-forgotten-export) The symbol "AbrController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:186:3 - (ae-forgotten-export) The symbol "BufferController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:187:3 - (ae-forgotten-export) The symbol "CapLevelController" needs to be exported by the entry point hls.d.ts
+// src/config.ts:188:3 - (ae-forgotten-export) The symbol "FPSController" needs to be exported by the entry point hls.d.ts
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/docs/API.md b/docs/API.md
index f7368c24de7..a70c1468e11 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -19,6 +19,7 @@
   - [`Hls.DefaultConfig get/set`](#hlsdefaultconfig-getset)
   - [`capLevelToPlayerSize`](#capleveltoplayersize)
   - [`capLevelOnFPSDrop`](#caplevelonfpsdrop)
+  - ['ignoreDevicePixelRatio'](#ignoreDevicePixelRatio)
   - [`debug`](#debug)
   - [`autoStartLoad`](#autostartload)
   - [`startPosition`](#startposition)
@@ -419,6 +420,13 @@ This configuration will be applied by default to all instances.
   then the quality level is dropped and capped at this lower level.
 - when set to false, levels will not be limited. All available levels could be used in auto-quality mode taking only bandwidth into consideration.
 
+### `ignoreDevicePixelRatio`
+
+(default: `false`)
+
+- when set to true, calculations related to player size will ignore browser `devicePixelRatio`.
+- when set to false, calculations related to player size will respect browser `devicePixelRatio`.
+
 ### `debug`
 
 (default: `false`)
diff --git a/src/config.ts b/src/config.ts
index 2ea20f28fe3..4318f25870d 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -164,6 +164,7 @@ export type HlsConfig = {
   enableWorker: boolean;
   enableSoftwareAES: boolean;
   minAutoBitrate: number;
+  ignoreDevicePixelRatio: boolean;
   loader: { new (confg: HlsConfig): Loader<LoaderContext> };
   fetchSetup?: (context: LoaderContext, initParams: any) => Request;
   xhrSetup?: (xhr: XMLHttpRequest, url: string) => void;
@@ -211,6 +212,7 @@ export const hlsDefaultConfig: HlsConfig = {
   debug: false, // used by logger
   capLevelOnFPSDrop: false, // used by fps-controller
   capLevelToPlayerSize: false, // used by cap-level-controller
+  ignoreDevicePixelRatio: false, // used by cap-level-controller
   initialLiveManifestSize: 1, // used by stream-controller
   maxBufferLength: 30, // used by stream-controller
   backBufferLength: Infinity, // used by buffer-controller
diff --git a/src/controller/cap-level-controller.ts b/src/controller/cap-level-controller.ts
index bc75ffb6905..338912b0982 100644
--- a/src/controller/cap-level-controller.ts
+++ b/src/controller/cap-level-controller.ts
@@ -214,20 +214,23 @@ class CapLevelController implements ComponentAPI {
   }
 
   get mediaWidth(): number {
-    return this.getDimensions().width * CapLevelController.contentScaleFactor;
+    return this.getDimensions().width * this.contentScaleFactor;
   }
 
   get mediaHeight(): number {
-    return this.getDimensions().height * CapLevelController.contentScaleFactor;
+    return this.getDimensions().height * this.contentScaleFactor;
   }
 
-  static get contentScaleFactor(): number {
+  get contentScaleFactor(): number {
     let pixelRatio = 1;
-    try {
-      pixelRatio = self.devicePixelRatio;
-    } catch (e) {
-      /* no-op */
+    if (!this.hls.config.ignoreDevicePixelRatio) {
+      try {
+        pixelRatio = self.devicePixelRatio;
+      } catch (e) {
+        /* no-op */
+      }
     }
+
     return pixelRatio;
   }
 
diff --git a/tests/unit/controller/cap-level-controller.js b/tests/unit/controller/cap-level-controller.js
index 6bc22f4acfc..5347bc5b072 100644
--- a/tests/unit/controller/cap-level-controller.js
+++ b/tests/unit/controller/cap-level-controller.js
@@ -113,7 +113,7 @@ describe('CapLevelController', function () {
     it('gets width and height attributes when the media element is not in the DOM', function () {
       media.setAttribute('width', 320);
       media.setAttribute('height', 240);
-      const pixelRatio = CapLevelController.contentScaleFactor;
+      const pixelRatio = capLevelController.contentScaleFactor;
       const bounds = capLevelController.getDimensions();
       expect(bounds.width).to.equal(320);
       expect(bounds.height).to.equal(240);
@@ -125,7 +125,7 @@ describe('CapLevelController', function () {
       media.style.width = '1280px';
       media.style.height = '720px';
       document.querySelector('#test-fixture').appendChild(media);
-      const pixelRatio = CapLevelController.contentScaleFactor;
+      const pixelRatio = capLevelController.contentScaleFactor;
       const bounds = capLevelController.getDimensions();
       expect(bounds.width).to.equal(1280);
       expect(bounds.height).to.equal(720);