jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feature/kasm 2041 mobile scaling (#20) 

* KASM-2041 auto scale high res mobile - Browsers typically set a scale ratio for high resolution screens, so everything isn't tiny. This mostly works well, but results in a super low resolution for the remote display. This feature detects low resolutions where the browser is doing scaling and adjusts the scale backwards to reach a more reasonable resolution. This typically only happens on modern phones.
This commit is contained in:
mmcclaskey 2021-11-08 12:55:37 -05:00 committed by GitHub
parent 0509b6241f
commit e11e76e2c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/display.js
View File

@ -418,13 +418,12 @@ export default class Display {
this._damage(x, y, w, h); this._damage(x, y, w, h);
} }
autoscale(containerWidth, containerHeight) { autoscale(containerWidth, containerHeight, scaleRatio=0) {
let scaleRatio;
if (containerWidth === 0 || containerHeight === 0) { if (containerWidth === 0 || containerHeight === 0) {
scaleRatio = 0; scaleRatio = 0;
} else { } else if (scaleRatio === 0) {
const vp = this._viewportLoc; const vp = this._viewportLoc;
const targetAspectRatio = containerWidth / containerHeight; const targetAspectRatio = containerWidth / containerHeight;
@ -459,7 +458,7 @@ export default class Display {
this._target.style.height = height; this._target.style.height = height;
} }
Log.Debug('Pixel Ratio: ' + window.devicePixelRatio + ', VNC Scale: ' + factor + 'VNC Res: ' + vp.w + 'x' + vp.h); Log.Info('Pixel Ratio: ' + window.devicePixelRatio + ', VNC Scale: ' + factor + 'VNC Res: ' + vp.w + 'x' + vp.h);
var pixR = Math.abs(Math.ceil(window.devicePixelRatio)); var pixR = Math.abs(Math.ceil(window.devicePixelRatio));
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

17
core/rfb.js
View File

@ -1031,7 +1031,7 @@ export default class RFB extends EventTargetMixin {
this._display.scale = 1.0; this._display.scale = 1.0;
} else { } else {
const size = this._screenSize(false); const size = this._screenSize(false);
this._display.autoscale(size.w, size.h); this._display.autoscale(size.w, size.h, size.scale);
} }
this._fixScrollbars(); this._fixScrollbars();
} }
@ -1065,6 +1065,7 @@ export default class RFB extends EventTargetMixin {
} }
var x = this._screen.offsetWidth; var x = this._screen.offsetWidth;
var y = this._screen.offsetHeight; var y = this._screen.offsetHeight;
var scale = 0; // 0=auto
try { try {
if (x > 1280 && limited && this.videoQuality == 1) { if (x > 1280 && limited && this.videoQuality == 1) {
var ratio = y / x; var ratio = y / x;
@ -1075,13 +1076,25 @@ export default class RFB extends EventTargetMixin {
else if (limited && this.videoQuality == 0){ else if (limited && this.videoQuality == 0){
x = 1280; x = 1280;
y = 720; y = 720;
} else if (this._display.antiAliasing === 0 && window.devicePixelRatio > 1 && x < 1000 && x > 0) {
// small device with high resolution, browser is essentially zooming greater than 200%
Log.Info('Device Pixel ratio: ' + window.devicePixelRatio + ' Reported Resolution: ' + x + 'x' + y);
let targetDevicePixelRatio = 1.5;
if (window.devicePixelRatio > 2) { targetDevicePixelRatio = 2; }
let scaledWidth = (x * window.devicePixelRatio) * (1 / targetDevicePixelRatio);
let scaleRatio = scaledWidth / x;
x = x * scaleRatio;
y = y * scaleRatio;
scale = 1 / scaleRatio;
Log.Info('Small device with hDPI screen detected, auto scaling at ' + scaleRatio + ' to ' + x + 'x' + y);
} }
} catch (err) { } catch (err) {
Log.Debug(err); Log.Debug(err);
} }
return { w: x, return { w: x,
h: y }; h: y,
scale: scale };
} }
_fixScrollbars() { _fixScrollbars() {